Skip to main content

Introduction to CSS Viewport Units

CSS viewport units are not alien to us now. They have been there around for few years now. Its no wonder it was not with full browser support earlier but at moment, they are supported in all major browsers including IE10+ versions. The viewport is the visible area of a web page and viewport unit is relative to that viewport size, unlike percentage unit which is relative to its parent.

What are these units?

These are actually relative length units and hence efficient for responsive layouts. There are four viewport units.

Viewport height (vh) = As it's name states, it is based on height of the viewport. Thus 1vh = 1% of viewport height.

Viewport Width (vw) = It is relative to its viewport width. 1vw = 1% of viewport width.

Viewport Minimum (vmin) = Based on smaller dimension of the viewport. Either width or height, whatever is smaller, vmin will be related to that. 5vmin = 5% of current viewport height or width, whichever is smaller.

Viewport Maximum (vmax) = Based on larger dimension of the viewport. Either width or height, whatever is higher, vmax will be related to that. 5vmax = 5% of current viewport height or width, whichever is larger.

To sum up,


Browser Support:



How to use them?

The most compelling use case is typography, specially headings. As we know that viewport units are relative length units so the size of units will change with viewport size. Thus the font-size or headings will fit to the screen size.

Syntax:

h1 {
   font-size: 2vw;
}


Lets see an example.

See the Pen CSS Viewport Unit Tester by Archana Atara (@archanaa) on CodePen.

In above example, font-size for h1 is set to 2vw by default. This size looks perfect unless we resize the browser. The font size does automatically resize but the difference is vast. You will notice the huge difference in larger and smaller font size across various resolutions. So 2vw seems proper for large screens like 1920px but not for smaller ones thus making fonts either too large or too small, sometimes making it unreadable.

To overcome this, we may simply try to use media queries and define, for instance, font size to 4vw for smaller screens like screens<=800px as in above example. There are few more hurdles using these units as we can not use media queries for all the resolutions.

Refer here more interesting and detailed article for typography with CSS viewport units which is a must read if you're planing to use these soon.

Another use cases include centering elements, specially in lighboxes, responsive background images, sticky footer and so on and so forth which will be coming in near future, I believe.

If you have done any new creativity with viewport units, please show in your comments here!


Comments