CSS offers various units for sizing elements. The popular choices are
em and more recently
rem. There are two other units that have quickly become favourites of mine,
vh. These are relative units, but unlike say
rem which are relative to the font size of the current and root element respectively,
vh are relative to the viewport. A single viewport unit is equivalent to 1% of the viewport width (
vw) or height (
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.
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
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
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.
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
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
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
vh units can be set on more than just height and width, but also padding and margin. For example, if we create a single
margin: 20vh 20vw; width: 60vw; height: 60vh; we are ready to go.
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.