Viewport Units (vw, vh, dvh)

Viewport units size things relative to the visible browser viewport rather than a parent element.

vw is one percent of the viewport width. vh is one percent of the viewport height, while dvh measures the dynamic viewport height, adjusting with browser interface changes where supported.

Newer svh and lvh refer to small and large viewport heights. On mobile devices with changing browser bars, these distinctions can matter. Use constraints such as max-width so content remains readable at very large sizes.

A value such as <code>50vw</code> responds to browser width; it does not use the width of the immediate parent.

A viewport-wide heading region is still constrained by available space.

HTML

<div class="hero">Responsive banner</div>

CSS

.hero { width: min(65vw, 500px); max-width: 100%; background: #dbeafe; padding: 14px; box-sizing: border-box; border-radius: 9px; }

Rendered output

Observe: Resize the browser: the banner follows viewport width until it reaches its cap.

Use viewport width for fluid sizing but set sensible limits.

HTML

<p class="fluid-text">Scale gently with the browser.</p>

CSS

.fluid-text { font-size: clamp(16px, 3vw, 28px); color: #1d4ed8; font-weight: 700; }

Rendered output

Observe: The text scales within a readable range instead of growing without limit.

A value such as <code>50vw</code> responds to browser width; it does not use the width of the immediate parent.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A large 100vw element can create unwanted horizontal overflow in some layouts.
• Traditional vh can interact awkwardly with mobile browser UI; use dvh where dynamic height matters.

Test the banner at narrow and wide viewport widths. Then change the cap from 500px to 350px.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use viewport units deliberately and combine them with constraints for readable responsive designs.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.