CSS: Viewport-Based Measurement Units for Modern Websites

Vw, vh, vmin and vmax are viewport-based measurements units. Jonathan Snook and Chris Coyer covered them in their blog articles over 3 years ago and while these units were not well supported at the time, nowadays we can use them with higher confidence.

The Basics

Vw and vh are viewport-percentage lengths. 100vw equals the viewport width and 100vh equals the viewport height.

Vmin equal the smaller of vw or vh and vmax equal the bigger of two.

These units are similar to percentage-based measurements. The main difference in between % and vh/vw is that % is relative to the parent element while vh/vw takes into consideration only the browser’s viewport.

Support

Vw, vh and vmin are well supported across the board. Only the vmax property lacks support from Internet Explorer including its most recent version – Microsoft Edge.

Example

The following demo consists of a container that’s set to 90% of the vieports height and a line of text with the font size set to 20vw.

This technique is useful when we want to set the article’s header to be dominant and take a certain percentage of the screen. It can be used to present the first page to a visitor (cover) and push all the content below the fold.

.my-hero {
  /* core */
  font-size: 20vw;
  min-height: 90vh;
  line-height: 90vh;
  white-space: nowrap;
  overflow: hidden;

  /* decorative */
  margin: 40px 0;
  color: #fafafa;
  background: #333;
  text-align: center;
  box-shadow: inset 0 0 15vmin rgba(0,0,0,.9);
}

It might be a good idea to provide some fallback styling for older browsers when using v-units.

By setting the line-height to be the same as the height of the container and white-space: nowrap we can make the text vertically-centered in a full screen container.

Hey!
In the example above v-units are being used to specify the container’s inner shadow. Using pixels could result in either too much shadow on small screens or not enough on wider displays. By using vmin we make sure that regardless of the screen size and proportions the amount of shadow dropped will equal 15% of either viewport width or height (whichever is smaller).