Viewport Units Explained

Viewport units are CSS units that size an element relative to the browser's viewport. They are especially useful for responsive layouts because their values change as the available viewport changes.

The most familiar viewport units are vw and vh, which represent percentages of the viewport width and height. CSS also provides vmin and vmax, while modern CSS introduces small, large and dynamic viewport units such as svh, lvh and dvh to handle mobile browser interface changes more reliably.

Viewport units are powerful, but they are not a universal replacement for px, rem or percentage values. The right unit depends on what should control the size of an element: the viewport, the root typography scale, the parent element or the content itself.

Viewport Units at a Glance

What Is the Viewport?

The viewport is the area of the browser through which a web page is currently being viewed. On a desktop browser, it is closely related to the browser window's content area. On mobile devices, the situation is more complicated because browser interface elements can expand and collapse while the page remains open.

Viewport units are based on viewport dimensions rather than the dimensions of a parent element. That is what makes them different from percentages, which are commonly calculated relative to a containing block.

What Does vw Mean?

vw stands for viewport width. One vw unit represents 1% of the relevant viewport width.

.hero {
  width: 80vw;
}

.container {
  padding-inline: 5vw;
}

If the viewport is 1200px wide, 80vw corresponds to 960px and 5vw corresponds to 60px.

Common Uses for vw

vw is useful when an element should respond directly to the viewport width rather than to its parent.

• Fluid horizontal spacing.
• Responsive hero sections.
• Viewport-relative widths.
• Fluid typography when combined with clamp().
• Large decorative elements.
• Responsive positioning and sizing.

What Does vh Mean?

vh stands for viewport height. One vh unit represents 1% of the relevant viewport height.

.hero {
  min-height: 100vh;
}

.section {
  padding-block: 10vh;
}

For a viewport that is 900px high, 100vh corresponds to 900px and 10vh corresponds to 90px.

The Classic 100vh Layout

One of the most common uses of vh is creating a section that fills the viewport.

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

This can work well on desktop browsers. However, 100vh has historically been problematic on mobile browsers because the visible viewport can change when browser controls appear or disappear.

Why 100vh Can Be Problematic on Mobile

Mobile browsers have interface elements such as address bars and toolbars. Their visible size can change as the user scrolls. A viewport unit based on one viewport state may therefore not correspond to the currently unobstructed visible area.

This can cause a 100vh hero or application shell to become taller than the visible space in some situations, potentially resulting in content being hidden behind browser UI or requiring unexpected scrolling.

Modern Viewport Units

Modern CSS provides three viewport concepts designed to handle changing mobile browser UI more explicitly: small viewport, large viewport and dynamic viewport.

The same concepts exist for width with svw, lvw and dvw, as well as other viewport-relative unit families such as svmin and dvmax.

What Is svh?

svh means small viewport height. It represents 1% of the small viewport height, which is useful when an element must fit within the smaller available viewport state.

.app-shell {
  min-height: 100svh;
}

A small viewport-based layout is generally more conservative about available height. It can be useful when avoiding content being hidden by browser interface elements is more important than filling every possible pixel after those controls disappear.

What Is lvh?

lvh means large viewport height. It represents 1% of the large viewport height.

.visual-section {
  min-height: 100lvh;
}

The large viewport represents the larger viewport state available when browser interface elements that can dynamically collapse are not taking up as much space.

What Is dvh?

dvh means dynamic viewport height. It tracks the current dynamic viewport as the browser UI changes.

.mobile-layout {
  min-height: 100dvh;
}

This makes dvh particularly useful for layouts that need to follow changes in the visible viewport. For example, a mobile application shell may need its height to respond as browser controls appear or disappear.

svh vs lvh vs dvh

There is no universally correct choice. The correct unit depends on whether the layout should prioritize a guaranteed smaller available space, the largest possible viewport or continuous adaptation.

What Is vmin?

vmin represents 1% of the smaller dimension of the viewport: whichever is smaller between viewport width and viewport height.

.square {
  width: 40vmin;
  height: 40vmin;
}

Using the same value for width and height creates a square whose size follows the smaller viewport dimension. This is useful when an element must remain within both axes.

What Is vmax?

vmax represents 1% of the larger viewport dimension.

.shape {
  width: 30vmax;
  height: 30vmax;
}

vmax can be useful for large decorative elements or compositions that should respond to the largest viewport axis.

vw vs %

vw and percentages can look similar but have different reference points. A width of 50% is generally calculated relative to the containing block, while 50vw is calculated from the viewport width.

.parent {
  width: 600px;
}

.child-percent {
  width: 50%;
}

.child-vw {
  width: 50vw;
}

The percentage-based child follows its 600px parent, while the vw-based child follows the viewport. If the viewport is 1200px wide, 50vw is 600px regardless of the parent's width.

vw vs rem

rem follows the root font size, while vw follows the viewport width. This makes them suitable for different types of relationships.

For example, a heading could use rem when it should follow a stable typography scale, while a decorative hero element could use vw when it should grow with the browser width.

Fluid Typography with vw

Viewport units can create fluid typography because the font size changes continuously as the viewport changes.

h1 {
  font-size: 5vw;
}

The problem is that pure vw sizing can become too small on narrow screens and too large on very wide screens. A common solution is to combine a viewport unit with minimum and maximum limits using clamp().

Using clamp() with Viewport Units

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

The first value defines the minimum, the middle value provides the fluid preferred size, and the third value defines the maximum. This allows typography to respond smoothly to viewport width without becoming unreasonably small or large.

The same idea can be used for spacing, widths and other dimensions that benefit from fluid scaling.

.section {
  padding-block: clamp(3rem, 8vw, 8rem);
}

Viewport Units for Responsive Spacing

Viewport units can be useful for large layout spacing where the distance should grow with the available screen width.

.hero {
  padding-inline: clamp(1.5rem, 6vw, 8rem);
}

.section {
  padding-block: clamp(3rem, 8vh, 8rem);
}

Using clamp() prevents the spacing from becoming extreme. This is often preferable to using a raw value such as 10vw or 10vh without any limits.

Full-Screen Hero Sections

Viewport units are a natural fit for landing-page hero sections because the design may intentionally occupy a large portion of the screen.

.hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 4rem 2rem;
}

Using min-height rather than a fixed height allows the section to grow if its content needs more space.

When to Use 100dvh

100dvh can be useful for interfaces that genuinely need to track the current viewport, such as a mobile application shell, a full-screen modal or a screen-like interactive experience.

.modal {
  min-height: 100dvh;
}

However, a content-heavy website does not necessarily need a full viewport height. Normal document flow is often better than forcing every section to fill the screen.

Viewport Units and Mobile Safe Areas

On devices with display cutouts or system UI areas, viewport sizing can also interact with safe-area insets. When building edge-to-edge mobile interfaces, CSS environment variables such as env(safe-area-inset-top) and env(safe-area-inset-bottom) can be important.

.app {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

Viewport units and safe-area insets solve different problems. Viewport units describe available viewport dimensions, while safe-area variables provide information about areas that should not be obscured by device hardware or system interface regions.

Avoiding Horizontal Overflow with 100vw

A common mistake is using width: 100vw for a normal full-width element and then discovering a horizontal scrollbar. Depending on the browser and scrollbar behavior, 100vw can include the scrollbar area while the containing content width does not.

.full-width {
  width: 100vw;
}

For an ordinary block element that should simply fill its containing width, width: 100% is often the more appropriate choice.

.full-width {
  width: 100%;
}

Viewport Units and Scrollbars

Scrollbar behavior is one reason viewport-relative widths can sometimes produce unexpected overflow. This is especially noticeable when an element is nested inside a page that has a traditional vertical scrollbar.

When a layout only needs to span the available content width, percentages, max-width and normal block sizing are often safer. Reserve viewport width for situations where the viewport itself is the intended reference.

Using Viewport Units in CSS Grid

Viewport units can be combined with Grid to create responsive layouts, but they should usually complement rather than replace intrinsic sizing.

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 25vw);
  gap: clamp(1rem, 3vw, 3rem);
}

The sidebar responds to the viewport while minmax() prevents it from becoming unreasonably small. The gap is also fluid but bounded.

Viewport Units in Flexbox

The same principle applies to Flexbox. A viewport unit can provide a fluid basis for a component while min(), max() or clamp() keeps the result within sensible limits.

.sidebar {
  width: clamp(16rem, 25vw, 24rem);
}

Combining Viewport Units with Media Queries

Viewport units and media queries solve different problems. A media query changes styles when a breakpoint condition is met, while a viewport unit can change continuously as the viewport changes.

.hero {
  padding-inline: clamp(1rem, 5vw, 6rem);
}

@media (max-width: 48rem) {
  .hero {
    padding-inline: 1rem;
  }
}

This combination can be useful when a design needs smooth scaling across a range but also requires a deliberate layout change at a specific breakpoint.

Viewport Units vs Breakpoints

Modern responsive CSS often combines all of these rather than choosing only one. A page can use media queries for major layout changes, container queries for component behavior and viewport units for fluid visual scaling.

Common Mistakes with Viewport Units

Using 100vh for Every Full-Screen Section

Not every section needs to fill the viewport. Forcing 100vh onto content-heavy sections can create awkward empty space or overflow when the content is taller than the viewport.

Using Raw vw for Font Sizes

A declaration such as font-size: 5vw can become too small on narrow screens and excessively large on wide screens. clamp() is often a better approach.

Using 100vw Instead of 100%

If the intention is simply to fill a parent container, 100% is usually clearer. 100vw explicitly references the viewport and can introduce overflow in some layouts.

Ignoring Mobile Viewport Behavior

A layout that looks correct on desktop can behave differently on mobile because browser controls change the visible viewport. Full-height interfaces should be tested on real mobile browsers.

Using Viewport Units for Everything

Viewport units are not inherently more responsive than every other CSS unit. A component may be more robust when its width follows its container, its typography follows rem and its internal spacing uses em.

A Practical Viewport Unit Strategy

A practical responsive system usually gives viewport units a specific role instead of making them the default unit for every dimension.

• Use vw when a value should respond to viewport width.
• Use vh when a value should respond to viewport height and the viewport-height behavior is intentional.
• Use svh when fitting content into the smaller mobile viewport state is important.
• Use dvh when the layout should follow the current dynamic viewport.
• Use vmin when an element should scale according to the smaller viewport dimension.
• Use vmax when the larger viewport dimension should control the scale.
• Use clamp() when fluid scaling needs sensible minimum and maximum limits.
• Use percentages when the intended reference is a parent or containing block.
• Use rem for root-relative typography and global spacing.
• Use container units when a component should respond to its container rather than the entire viewport.

A Real-World Responsive Hero

.hero {
  min-height: 100svh;
  padding: clamp(2rem, 6vw, 6rem);
  display: grid;
  align-items: center;
}

.hero-title {
  max-width: 12ch;
  font-size: clamp(2.5rem, 7vw, 6rem);
}

.hero-description {
  max-width: 60ch;
  margin-top: clamp(1rem, 2vw, 2rem);
}

.hero-actions {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 3rem);
}

This example combines several responsive techniques. The hero uses the small viewport height to avoid relying on a potentially larger mobile viewport, while clamp() creates bounded fluid spacing and typography. max-width prevents text from becoming excessively wide.

Viewport Units and Modern CSS

Viewport units are most useful when combined with other modern CSS features rather than used in isolation. clamp(), min(), max(), Grid, Flexbox, container queries and intrinsic sizing allow developers to express more precise responsive relationships.

.card {
  width: min(90vw, 70rem);
  padding: clamp(1rem, 3vw, 3rem);
}

.card-title {
  font-size: clamp(1.5rem, 3vw, 3rem);
}

Here, min() prevents the card from becoming wider than a defined maximum while 90vw provides a responsive outer size. clamp() then controls internal spacing and typography within bounded limits.

How to Test Viewport-Based Layouts

Viewport-unit layouts should be tested across different viewport widths and heights, not only at the breakpoints defined in media queries.

• Resize the browser continuously rather than checking only a few fixed widths.
• Test both portrait and landscape orientations on mobile devices.
• Check narrow phones where viewport height is limited.
• Check wide desktop monitors where vw-based typography can become large.
• Test browser zoom and increased text size.
• Check for horizontal overflow caused by 100vw.
• Test full-height layouts while mobile browser controls are visible and hidden.
• Check that important content remains reachable when the viewport becomes smaller.

Frequently Asked Questions

Helpful Viewport Unit Tools

A vh-to-px converter and vw-to-px converter are useful for quickly understanding how viewport values translate at a particular screen size. A CSS unit converter can also help compare viewport units with px, rem, em and other CSS measurements.

For responsive layouts, a breakpoint calculator can help determine useful viewport thresholds, while a CSS clamp generator can simplify the creation of bounded fluid values for typography, spacing and component dimensions.

Conclusion

Viewport units provide a direct way to make CSS values respond to the browser viewport. vw follows viewport width, vh follows viewport height, vmin and vmax respond to the smaller or larger viewport dimension, and modern svh, lvh and dvh units provide more control over changing mobile viewport states.

The most reliable responsive layouts rarely use viewport units everywhere. Instead, they combine them with rem, percentages, intrinsic sizing, media queries, container queries and functions such as clamp(), min() and max().

The key is to choose the reference that matches the design requirement. If the value should follow the viewport, use a viewport unit. If it should follow a parent, use a percentage or container-based approach. If it should follow typography, consider rem or em. When fluid scaling is useful but needs limits, combine viewport units with clamp().