Understanding Viewport Units

There are a few units that work like px or em but are based upon a percentage of the current browser viewport. The main difference between a viewport measurement and a percentage measurement is that a viewport measurement will always resolve to the browser width while a regular percentage measurement will resolve to the containing element.

Viewport Width (vw) – A percentage of the full viewport width. 10vw will resolve to 10% of the current viewport width, or 48px on a phone that is 480px wide.

Viewport Height (vh) – A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height.

Viewport Minimum (vmin) – A percentage of the viewport width or height, whichever is smaller. 10vmin will resolve to 10% of the current viewport width in portrait orientations, and 10% of the viewport height on landscape orientations.

Viewport Maximum (vmax) – A percentage of the viewport width or height, whichever is larger. 10vmax will resolve to 10% of the current viewport height in portrait orientations, and 10% of the viewport width on landscape orientation.