New Viewport-relative Units

Just when we thought responsive web design couldn’t get any more exciting, CSS3 recently introduced a new set of dynamic units for sizing elements — and they’re quickly gaining support!

These powerful new units: vw, vh and vmin, when fully supported by the major browsers, will mitigate the chore of converting px to em or percentages, and above all, provide an efficient solution for designers & developers striving for device-agnostic designs. If you are already familiar with font-relative units like em and rem, you will find these new viewport-relative units indispensable when developing dynamic layouts.

How do vw, vh, and vmin work?

Using them is fairly straightforward and not as complicated as it might first seem. If you haven’t used them before, think of each unit’s value as being equal to 1% or 1/100th of the size of the viewport. So whenever the browser viewport is resized, the computed values of vw, vh, or vmin change to resize the specified elements relative to the width and the height of the viewport, or smallest of the two sizes. Sure, we can achieve similar results now with percentages or em units, but what makes these so promising is they eliminate the dependency on parent elements and instead allow sizing purely based on the viewport size.

The vw unit
The vw unit (viewport width) is equal to 1/100th or 1% of the width of the viewport. In the example below, if the width of the viewport is 1000px, the font size of the h1 will be 40px.

h1 {
   font-size: 4vw;
}

Let’s do some quick math to illustrate how it works:

4×1000/100 = 40

Pretty simple, right?

The vh unit
Similar to vw, the vh unit (viewport height) is equal to 1/100th or 1% of the height of the viewport. In this example, if the viewport height is 700px, the max-height of the image will be 175px (25×700/100 = 175 ).

img  {
   max-height: 25vh;
}

The vmin unit
This unit is 1/100th or 1% of the minimum value between the height and the width of the viewport. So for example, If the viewport is 1000px by 700px, then 100vmin would be equivalent to 700px.

We can use vh, vw and vmin for just about anything, especially text, headings and layout. They help maintain readable text if, for example, you’re working with multi-column layouts. A width and height can be specified to make sure content does not extend below the viewport height, so users won’t have to scroll up and down the columns when reading.

section {
   height: 60vh;
   width: 60vw;
   column-width: 20rem;
   column-gap: 2.4rem;
   overflow: scroll;
}

With the overflow: scroll; declaration the columns will  instead scroll horizontally. I created a quick demo so you can see an example of how this works. If you haven’t realized this by now, all of these things can be accomplished without relying on media queries to resize elements, or JavaScript to determine viewport sizes.

Browser support

Currently, these units are only supported in Chrome 20+, IE9+ and Safari 6. To follow-up on browser implementations, take a look at http://caniuse.com/viewport-units. For browsers that have not yet joined the party, we can — and should — always provide a fallback solution:

img {
   max-height: 175px;
   max-height: 25vh;
}

So go ahead and open up  a new code window, boot up Chrome, and start experimenting with these on your own. I’m sure you’ll find a new appreciation for designing & developing dynamic layouts!

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Guil Hernandez

Guil is the front-end design teacher at Treehouse. You can follow Guil on Twitter at @guilh.

Comments

2 comments on “New Viewport-relative Units

  1. Pingback: Some links for light reading (5/9/12) | Max Design