Viewport Units

  • Patrick Wall's picture
    August 19, 2015
Cool Things!
Here’s the examples of what you can do with viewport units for everyone who likes seeing the cool things first:
Number of characters on average per line should be around 80 characters for WCAG 2 AAA compliance, how do we do this? Viewport Units!
Make text fill an area no matter what:

Change the size of a child element regardless of what the parent element’s size is:

Vertical alignment of text:

Dynamic heights of elements:

Centering an item vertically and horizontally:

Breaking an image out of the normal page flow:

Wait, what’s a viewport?
It’s the area of the webpage you can see in your browser. So this is the viewport:
And so is this:
As you can see, it can change width and height depending not only on device and orientation but on how big it’s been sized by the person using it.
So what is a viewport unit?
It’s a percentage of your viewport, in particular here are the units and what they equal:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
Are these one of those things that aren’t supported yet?
No, these are fairly well supported, with some issues around vmin and vmax currently, you can see the current status here:
Not good enough for you? Try a poly, err, buggy fill:
You could also detect if it’s supported in the current browser with modernizr and load fallback css using old units:
Curious about more?
Look into other relative units like the rem: