The vw and vh units

These units allow you to specify sizes in terms of percentages of the viewport width and viewport height. See also the test page without a meta viewport.

The allowed units are:

  1. vw: hundredths of the viewport width.
  2. vh: hundredths of the viewport height.
  3. vmin: hundredths of whichever is smaller, the viewport width or height.
  4. vmax: hundredths of whichever is larger, the viewport width or height.

Examples

Here are some examples. 50vw means 50% of the viewport width.

Don’t forget to resize your browser window to see the boxes resize automatically.

Test of width: 50vw.
Test of width: 50vh.
Test of width: 50vmin.
Test of width: 50vmax.