With the introduction of CSS3 we’ve seen huge advancements in web technology, and the last few years have felt like golden ones for anyone working on the Web.

One great addition that hasn’t been talked up enough is viewport units. They’re anew kind of CSS3 unit that allow you to size elements relative to the viewport.

Browser support

The browser support for viewport units is surprisingly good. There’s full support in all the latest desktop browsers.

IE has had full support since IE9 (although it didn’t support the vmin property and IE 10 still has some problems with vmax).

In the mobile world the news isn’t so good. Viewport units are partially supported (there are problems with vh) by Safari, the Blackberry browser and IE Mobile. Android will follow shortly.

Using viewport units

Viewport units work as follows:

  • 1vw is equal to 1% of the viewport’s width.
  • 1vh is equal to 1% of the viewport’s height.
  • 1vmin searches the width and height of the viewport and uses the smaller of the two. For example, if the height is smaller, 1vmin will be equal to 1% of viewport’s height.
  • 1vmax acts the same way as vmin but instead of looking for the smallest it looks for the larger value.

To illustrate this, consider the following HTML:

<h1>A Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#"> About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>Your paragraph text in here</section>

Starting with the h1, let’s say we want the heading to be pretty big, so we’ll set it to 15vw, 15% of the viewport’s width:

h1 {
  font-size: 15vw;
  text-align: center;
}

If you want to control the number of lines on the page you can specify the font-size and the line-height of an element based on the height of the viewport, paragraph elements for example:

p {
  font-size: 2.5vh;
  line-height: 3.5vh;
}

Setting type sizes is useful, but the units can also be used for layout. For example, here we set the width to 80% of the viewport width and make sure it always stays centered by setting the margins to auto:

section {
  width: 80vw;
  margin: auto;
}

Final thoughts

As you can imagine, viewport units work fabulously when combined with media queries.

The only real downside I see is that they don’t adjust as you scale down your browser, you have to refresh the page, which is something we’re not used to when we’re dealing with responsive layouts.

You can, as usual, see a demo of this here.

Sizing elements based on the viewport size makes perfect sense, and it’s only a matter of time before their use is widespread.

Have you tried coding with viewport units? Do you prefer percentages? Let us know in the comments.

By Sara Vieira
Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.
  • Brandon

    This has definitely been a little under the radar, but it makes a lot of sense and efficiently avoids a potentially undesirable descendant chain of 100% heights, which isn’t even possible in some contexts.

    Maybe just a matters of terms, but while the missing on-the-fly adjustment on browser resizing is disappointing for developers, but I wouldn’t consider it a downside exactly as end users pretty much never resize their browser.

  • rick gregory

    Nice, but the lack of Android pre 4.4 and spotty Mobile Safari puts this in the ‘check it again when I can use it’ category and that’s too bad because this would be really useful.

  • azzcatdesign

    Unfortunately, the place where I could REALLY use viewport units–for STBs (set-top-boxes) that display on widely disparate TV screen sizes–the support isn’t yet there.

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns