CSS Viewport Units

What are Viewport Units?

Viewport units are relative units in CSS that are based on the size of the browser window (viewport).

h1 {
  font-size: 10vw;  /* 10% of browser width */
}

The text size increases or decreases with screen width.

.hero {
  height: 100vh;  /* full screen height */
}

Common for full-screen sections like banners.

.box {
  width: 50vmin;  /* 50% of the smaller screen dimension */
  height: 50vmax; /* 50% of the larger screen dimension */
}

Useful when you want elements to scale uniformly on all devices.

.section {
  width: 100vw;
  height: 100vh;
  background: lightblue;
}

p {
  font-size: 2vw;  /* scales with screen width */
}