Viewport Units: Sizing Against the Browser Window

WHY IT EXISTS Before viewport units, creating elements that reliably spanned the full height or width of the browser window was tricky, often requiring JavaScript to measure the window and set styles dynamically. CSS needed a native way to size things relative to the viewport itself, not just a parent container.

THE MENTAL MODEL Viewport units are percentages of the browser window's dimensions. Think of the viewport as the visible area of the web page. 1vw is 1% of the viewport's width, and 1vh is 1% of its height. Unlike percentages (%), which are relative to the parent element's size, vw and vh are always relative to the viewport, allowing elements to "escape" the constraints of their containers.

HOW IT WORKS The browser calculates the viewport's dimensions in pixels and then determines the value of 1vw and 1vh. For a viewport that is 1200px wide and 800px high, 1vw equals 12px and 1vh equals 8px. If you set an element's font-size to 2vw, its computed font size will be 24px in this viewport. If the user resizes the window, the element's size updates automatically. Besides vw and vh, there are also vmin (the smaller of vw or vh) and vmax (the larger of vw or vh).

WHEN TO USE IT Use viewport units for three main scenarios: first, creating full-screen elements, like a hero image with height: 100vh; second, for fluid typography that scales with the browser window (font-size: 2.5vw); and third, for elements that need to break out of a parent container to span the full width of the screen.

WHEN NOT TO USE IT Avoid using vw for font sizes on their own, as text can become unreadably small on narrow screens. The most famous footgun is using width: 100vw, which will almost always cause a horizontal scrollbar on pages that have a vertical scrollbar. This happens because 100vw is the entire window width, including the space taken by the scrollbar itself, which content cannot occupy. Use width: 100% on a top-level element for full width instead.

ONE CANONICAL EXAMPLE A common "hero" section that fills the entire screen on page load. The CSS would be: .hero-section { height: 100vh; /* Makes the section exactly as tall as the viewport */ width: 100%; /* Use 100% not 100vw to avoid horizontal scroll issues */ background-color: lightblue; } This makes the .hero-section always fill the user's screen vertically, regardless of the device, without causing unexpected horizontal scrollbars.