CSS

Introducing viewport units

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.

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. More articles by Sara Vieira
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress