Sizing Things Relative to the Screen with Viewport and Media Units

Most CSS measurements are absolute or relative to other elements. A width in pixels is fixed. A width in percent is relative to the parent. But sometimes you want to size something relative to the screen itself, a hero section that fills the visible area no matter the device, a font that scales with the window. That is what viewport units do. Paired with the relative units you use inside media queries, they form the backbone of designs that adapt fluidly to whatever is viewing them.

Viewport Units

Viewport units measure against the viewport, which is the visible area of the page in the browser window. Because they are tied to the screen rather than to any element, they scale automatically as the window changes size. There are four of them, and they cover the dimensions of the viewport in different ways.

vw stands for viewport width. One vw equals one percent of the viewport’s width, so 100vw is the full width of the screen:

.full-width {
  width: 100vw;
}

This makes an element span the entire width of the viewport regardless of its parent container, which is useful for breaking out of a constrained layout to create something edge to edge.

vh is the vertical equivalent. One vh equals one percent of the viewport’s height, so 100vh fills the screen top to bottom:

.full-height {
  height: 100vh;
}

This is the standard way to make a section occupy the full height of the screen, which used to be surprisingly difficult before viewport units existed.

vmin is the more subtle one. It equals one percent of whichever dimension is smaller, the width or the height. This keeps an element’s size proportional no matter the orientation:

.responsive-box {
  width: 50vmin;
  height: 50vmin;
}

Because both width and height are set to 50vmin, this box stays square and scales to fit comfortably whether the screen is portrait or landscape. It always sizes against the smaller dimension, so it never overflows the shorter side. This makes vminexcellent for elements that need to stay fully visible regardless of how the device is held.

vmax is the opposite, equal to one percent of the larger dimension. It is used less often, but it applies when you specifically want a size driven by the bigger side of the viewport:

.larger-element {
  font-size: 5vmax;
}

Here the font scales with whichever dimension is larger, growing more aggressively on wide screens than vw or vh alone would.

Units in Media Queries

Viewport units handle continuous scaling, but responsive design also needs breakpoints, the points at which the layout changes more dramatically. That is the job of media queries, and the units you choose for your breakpoints matter.

The most reliable choice is em or rem. An em is relative to the font size of the current element, while a rem is relative to the font size of the root html element. Using them for breakpoints means your layout responds to the user’s font size settings, not just raw pixels:

/* With a base font size of 16px, 40em equals about 640px */
@media (min-width: 40em) {
  .container {
    width: 80%;
  }
}

The advantage over pixel-based breakpoints is accessibility. If a user increases their browser’s default font size, breakpoints defined in em or rem shift accordingly, so the layout adapts to their preference rather than ignoring it. This is why relative units are generally preferred for breakpoints.

You can also use viewport units inside media queries, though this is less common:

@media (min-width: 50vw) {
  .sidebar {
    display: block;
  }
}

This works, but breakpoints based on viewport units are harder to reason about than ones based on em or rem, so most designs stick with the relative units for their breakpoints and reserve viewport units for sizing elements.

Putting Them Together

The two techniques complement each other. Viewport units handle the elements that should scale continuously with the screen, and media queries with relative units handle the structural changes that should happen at specific sizes.

A full-screen hero section is a natural use for viewport units:

.hero {
  width: 100vw;
  height: 100vh;
  background: url('hero.jpg') center/cover no-repeat;
}

This fills the entire visible area with a background image, adapting to any device without a single fixed measurement.

A media query with relative units, meanwhile, handles a layout shift at a breakpoint:

@media (min-width: 40em) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Once the screen is wide enough, the container caps its width and centres itself, which keeps content readable on large monitors rather than stretching across the whole screen.

A Few Guidelines

Use each technique for what it does best. Viewport units are for sizing elements directly against the screen. Relative units in media queries are for predictable, accessible breakpoints. Mixing them appropriately, rather than forcing one to do everything, gives the cleanest results.

Test across devices and orientations. Viewport units behave differently in portrait and landscape, and the interaction between vmin, vmax, and changing orientation can surprise you. Real devices reveal scaling issues that a desktop browser window resize does not always show.

Do not overuse viewport units. They are powerful precisely because they scale aggressively, but that same quality can make a design feel unpredictable if everything is sized this way. Text set entirely in vw, for example, can become uncomfortably small on narrow screens or oversized on wide ones. Use them where they genuinely improve responsiveness and fall back to more stable units where readability matters most.

The Takeaway

Viewport units let you size elements relative to the screen itself: vw and vh for width and height, vmin and vmax for the smaller and larger dimensions. They are ideal for full-screen sections and elements that should scale with the window. Media queries handle the breakpoints where layouts change, and using em or rem for those breakpoints keeps them responsive to the user’s own font size settings. Combine the two thoughtfully, viewport units for fluid scaling and relative units for sensible breakpoints, and you get designs that adapt smoothly across the full range of devices people actually use.

See you soon.