What Are Viewport Units?

Viewport units are relative to the browser window (viewport) size. They allow you to size elements based on the visible area of the screen, making them perfect for responsive design.

The Four Viewport Units

vw (Viewport Width)

1vw equals 1% of the viewport width. If the browser window is 1200px wide, 1vw = 12px.

CSS

.full-width-banner {
  width: 100vw;  /* Full viewport width */
}

h1 {
  font-size: 5vw; /* Scales with window width */
}

vh (Viewport Height)

1vh equals 1% of the viewport height. If the browser window is 800px tall, 1vh = 8px.

CSS

.hero-section {
  height: 100vh;  /* Full viewport height */
}

.half-screen {
  min-height: 50vh; /* At least half the screen */
}

vmin (Viewport Minimum)

1vmin equals 1% of the smaller dimension (width or height). On a 1200x800 viewport, 1vmin = 8px (1% of 800).

CSS

.responsive-square {
  width: 50vmin;
  height: 50vmin; /* Always a square, fits in viewport */
}

vmax (Viewport Maximum)

1vmax equals 1% of the larger dimension (width or height). On a 1200x800 viewport, 1vmax = 12px (1% of 1200).

CSS

.large-element {
  width: 80vmax;
}

Common Use Cases

Full-Screen Hero Section

CSS

.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

Responsive Typography

CSS

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

Using clamp() with vw units creates fluid typography that scales smoothly but has minimum and maximum limits.

Full-Width Sections Inside Containers

CSS

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Break out of the container to full width */
.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

The Mobile Viewport Problem

On mobile browsers, 100vh can cause issues because the address bar height is included in the viewport calculation. When the address bar appears or disappears, elements sized with vh can jump.

The Solution: New Viewport Units

Modern CSS introduces new units to handle this:

svh (Small Viewport Height): Height when the mobile UI is fully expanded (address bar visible)
lvh (Large Viewport Height): Height when the mobile UI is minimized
dvh (Dynamic Viewport Height): Adapts dynamically as the UI changes

CSS

.hero {
  /* Fallback for older browsers */
  height: 100vh;
  /* Modern: adjusts with mobile browser UI */
  height: 100dvh;
}

Viewport Units vs Percentages

CSS

/* Percentage: relative to PARENT element */
.child {
  width: 50%;    /* 50% of parent's width */
  height: 50%;   /* 50% of parent's height */
}

/* Viewport units: relative to BROWSER WINDOW */
.child {
  width: 50vw;   /* 50% of viewport width */
  height: 50vh;  /* 50% of viewport height */
}

The key difference is that percentages depend on the parent, while viewport units depend on the browser window, regardless of the element's position in the DOM.

Combining Viewport Units with calc()

CSS

/* Full height minus a fixed header */
.content {
  height: calc(100vh - 80px);
}

/* Responsive padding */
.section {
  padding: calc(2rem + 3vh) calc(1rem + 2vw);
}

Summary

Viewport units (vw, vh, vmin, vmax) size elements relative to the browser window, making them ideal for full-screen sections, responsive typography, and viewport-based layouts. Use dvh on mobile to avoid address bar issues, combine with clamp() for fluid typography, and pair with calc() for hybrid calculations.