Yet CSS3 gave us other new properties that are (arguably) more useful but less flashy. I’m referring to “relative units” here, officially called viewport units. Viewport units are a badass feature in CSS that let you specify the sizing of things based upon the viewport size1.
Not every browser supports viewport units (of course) but there are polyfills available2. Like any development, you’ll want to test this out in every relevant browser. Overall browser support seems mostly stable.
With the disclaimers out of the way, the four main viewport units are:
- vw - 1% of the viewport width or containing block width
- vh - 1% of the viewport height or containing block height
- vmin - the smaller value of 1vh or 1vw
- vmax - the larger value of 1vh or 1vw
With the viewport unit, you just set the section to 100vh height. Like magic, the section is the full viewable height: no more, no less. What’s more, you can resize your window and the section resizes with it. The container can be sized in any units, from mm to in, or em to %. As the developer, you don’t care about the absolute value because the vh / vw unit simply refers to 1/100 of its container in an abstract way.
The possibilities with using viewport units in layouts are pretty endless. For example, you can create a “scroll jacking” layout that sets each slide to 100vh. Rather than hijack the scroll event, you let it behave the way it always does and create a simple navigation scheme that moves to the selected slide. This is similar in concept as “scroll jacking” without repurposing scrolling at all. Or, say you need a banner image that spans 1/3 the height of the page regardless of the user’s device. Take that one a step further with flexbox, and bottom-align a title on top of the banner image.
Viewport units can be used for any kind of element. The examples written here so far were about containers like divs or sections. However, you can create responsive typography too. Size your fonts with the vh or vmax unit to allow big fonts on large devices and more appropriate sizes for smaller devices. It will feel like magic when your headers resize as the page does. Just like when sizing fonts with rem units, give a fallback size for older browsers in pixels.
- More specifically, viewport units are relative to a containing block. In most cases the containing block is the viewable area of the page without scrolling. However an absolutely positioned element becomes a containing block in itself, meaning that viewport units are relative to it and not the overall page.
- Polyfill for older browsers using vminpoly