These underutilized properties allow you to scale elements in proportion to the viewport.


What do vh and vw measure?

  • vh - measures the viewport height
  • vw - measures the viewport width

"viewport" refers to the browser window (or iframe).

What are the vh and vw units?

  • 1 vh = 1/100th the viewport height
  • 1 vw = 1/100th the viewport width

Isn't that just like the % unit? Yes and No. But mostly no.

When you apply a percentage to an attribute like width, eg width: 50%; you get a box that is 50% of the width of the parent element. This is useful, but limited. What if I wanted to set the width of the box to 50% of the height? The % unit (or any other unit) doesn't differentiate between up/down/left/right.

The vh and vw parameters do.

The magic of the vh and vw units is that you can apply them to anything that will take a unit of measurement. You can use it to set the size of elements, fonts, margins, paddings, or anything you can give a px, rem, em, or % to. For example, you can use vh to set the width of an element, so whenever the height of the viewport changes, so does the width of that element.

Here is an example, play with the size of this viewport to change the size of the text

Image

Let the viewport set the size

vh and vw allow you to have an element remain the same size in proportion to the viewport. It doesn't remain the same physical size, but the same size in relation to the size of the viewport. A value of 10vw will always be sized to 10% of the viewport width. This is great for responsive UI elements and dealing with DPI differences. You can just explicily express "I want this element to take up this much room of the viewport." Way easier than specifying a bunch of breakpoints.

Example

Click on one of the menu items to see how the menu responds when it is no longer in the iframe. Play with the width and height of the new window to see how the menu reacts.

See the Pen 03fd8da9b8736277dee5714878bca4f2 by Matthew Willox (@mwmwmw) on CodePen.

No matter how short you make the browser window, the menu always stays the same relative height. Explore the CSS in the example alter the vh/vw values to see what the effect is.

How is this accomplished

    nav {
    height: 75vh; // set the height to 75% of the view height.
    width: 40vh; // set the width to 40% of the view height.
  }

By setting the width AND the height to use vh, when the view height is changed, both the width and the height respond. When changing the width however, it has absolutely no effect.

Very handy.


What else can it do?

Like every other unit vh and vw support decimal numbers giving you nearly limitless control of exactly how large you want your elements to be in relation to the viewport size. You can also use them anywhere you use any other measurement unit. This includes transform: attributes like translateX();. However, it does not work with attributes like rotate3d();.

vh and vw measurements are only relative to the size of the viewport. They do not take into account any parent element size (unless that parent is an iframe).

For very small or unsuitable viewport dimensions you can still set a breakpoint and override the sizes, perhaps with a different vh or vw value depending on your use case.


I have used these units to design interfaces that work on a wide variety of screen dimensions. Combined with media queries, you can drastically cut down on the amount of CSS required to make the different sizes.

vh and vw are great for making full-screen interfaces as well. All of your elements can be constrained to fit within the viewport with ease. This is great for game menus and marketing sites where you have a lot of visuals but need to support many screen sizes.

If you have any questions or I have made a mistake, leave a comment.

GO BIG.


4,134 8 38