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.

Advertisements

One thought on “Introducing viewport units

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s