VW and VH Units in CSS: Creating Truly Responsive Layouts

What Are Viewport Units?

Viewport units are CSS units relative to the browser viewport (the visible area of the web page). There are four main viewport units: vw (viewport width), vh (viewport height), vmin (whichever is smaller), and vmax (whichever is larger).

1vw equals 1% of the viewport width. On a 1200px-wide screen, 1vw is 12px. On a 375px-wide phone, 1vw is 3.75px. This makes viewport units ideal for creating truly fluid designs that scale continuously with the screen size.

Common Use Cases

Full-screen hero sections

.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Fluid typography

/* Text that scales with viewport */
h1 {
  font-size: clamp(2rem, 5vw, 4.5rem);
}

/* clamp() prevents text from getting too small or too large */
p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

Full-width elements

.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

The 100vh Mobile Problem

On mobile browsers like Safari and Chrome on iOS, the address bar and bottom navigation bar take up screen space. When they are visible, 100vh is taller than the actual visible area, causing a scrollbar on what should be a full-screen element.

The fix is to use dynamic viewport units introduced in newer CSS specifications:

• dvh (dynamic viewport height): Adjusts as the address bar shows/hides
• svh (small viewport height): Always the smallest possible viewport
• lvh (large viewport height): Always the largest possible viewport

/* Modern fix for mobile */
.hero {
  height: 100dvh; /* Adapts to address bar changes */
}

/* Fallback for older browsers */
.hero {
  height: 100vh;
  height: 100dvh;
}

Convert PX to Viewport Units