Viewport Units: vw vh dvh

Viewport units are relative to the size of the browser viewport (the visible area of the browser window). They enable layouts and typography that scale with the available screen space.

1vw = 1% of the viewport width. 100vw fills the full viewport width. Useful for full-width elements without percentage complications.

1vh = 1% of the viewport height. 100vh fills the full viewport height. Classic for full-screen hero sections and modals.

On mobile browsers, the viewport height changes as the browser UI (address bar) shows/hides during scroll. 100vh can include or exclude the browser chrome inconsistently, causing content to be partially hidden.

dvh (dynamic viewport height) dynamically updates to reflect the actual visible height after the browser UI adjusts. It solves the mobile 100vh problem.

CSS also provides svh (small viewport height — excludes browser UI always) and lvh (large viewport height — as if UI is hidden). These allow fine control over mobile viewport behavior.

Using vw for font-size creates type that scales with the screen:

100vw includes the scrollbar width on desktops. This causes horizontal overflow if used carelessly. Prefer width: 100% on block elements, reserving vw for specific cases.

1vmin = 1% of the smaller viewport dimension (width or height). 1vmax = 1% of the larger. Useful for square containers that adapt to orientation changes.

Like height variants, CSS provides svw, lvw, and dvw for width. The dynamic variants (dvw, dvh) are the most useful on mobile.

Common viewport unit patterns:

• min-height: 100dvh — full-screen mobile-safe sections
• height: 100svh — fixed UI panels
• font-size: clamp(1rem, 2.5vw, 2rem) — fluid headings
• width: min(800px, 90vw) — safe-width containers

vw and vh are 1% of viewport width/height. On mobile, vh is unreliable due to the browser chrome. Use dvh for dynamic, mobile-accurate full-screen layouts. vmin and vmax respond to the smaller/larger viewport dimension.