CSS offers various units for sizing elements. The popular choices are px, %, pt, em and more recently rem. There are two other units that have quickly become favourites of mine, vw and vh. These are relative units, but unlike say em and rem which are relative to the font size of the current and root element respectively, vw and vh are relative to the viewport. A single viewport unit is equivalent to 1% of the viewport width (vw) or height (vh).
This turns out to be really useful. Remember that vw units whilst based on width can be used for any sort of sizing (e.g. a font size, or the height of a div). Here are some interesting techniques that make use of the viewport units:
Size Headings to Always Fit
If you want a heading to fill the whole screen, but stay on one line, you can size it with vw units. This is effectively a native way to achieve the functionality of FitText, a jQuery plugin used for this purpose. The downside here compared to FitText is that you will need to fiddle manually with the size. Plain old trial and error, using an inspector tool, is a quick route to figuring out the appropriate value.
See the Pen vw FitText Replacement by Martin Falkus (@falkus) on CodePen.
Infinite Lines
Whilst building the falcon633 WordPress theme (used on this site), I needed to create an angled background that would appear to continue indefinitely. This is achievable by 1) making sure that the angle in the centre stays the same regardless of window size and 2) setting the height to be relative to the viewport width. I used an SVG background for the overall cut-out then set the height based on the width using vw units.
Simple Video Wrappers
Let’s say you want to set the proportions of an element, an iframe, to stay at a fixed aspect ratio. You previously might have chosen to create a relative div filling the required space, then set carefully selected padding values with iframe inside absolutely positioned to cling to div on all sides (e.g. the approach demonstrated here).
A better solution could be to use the vw and vh units. This way you can set your height and width directly on the element in question, whilst also keeping the ‘layers-for-layout’ number down.
See the Pen 16:9 Film Wrapper by Martin Falkus (@falkus) on CodePen.
Full Screen Hero Images
Still a popular design choice these days. A full screen hero image is one that fills the entire browser viewport when a user first lands on a page. You could fiddle with height: 100% on the body and html tags, potentially adding the same rule to a bunch of parent elements as well. Alternatively, a simple height: 100vh; width: 100vw; on the image in question sorts all the sizing for you.
A True Centre div
Another common CSS request, placing a div in the centre of the page, both horizontally and vertically. This turns out to be easy when we consider that our vw and vh units can be set on more than just height and width, but also padding and margin. For example, if we create a single div with margin: 20vh 20vw; width: 60vw; height: 60vh; we are ready to go.
See the Pen vw/vh Middle Div by Martin Falkus (@falkus) on CodePen.
How about support?
Now comes the make or break point, how well supported are viewport units? Can you use them on the stylesheets you are building and maintaining today? Well, using the trusty caniuse.com we can see that the answer is yes. IE9+ supports the units. A few possible issues with iOS support for vh but nothing that means the units are to be avoided.
When you’re next piecing together awkward relative width and height values in a CSS file, viewport units might turn out to be the silver bullet you were looking for.