CSS Viewport Units

Understanding viewport units — `vh`, `vw`, and the newer dynamic, small, large, and logical variants — and when to use each.

Content tagged viewport-units

• Tutorial:Viewport Inline & Block Units: vi and vb

  Viewport units that follow text flow, not fixed axes.

  vi and vb behave like vw and vh in the default horizontal-tb writing mode, but unlike vw/vh they aren't tied to a fixed screen direction — switch to a vertical writing mode and the two swap, with vi tracking height and vb tracking width. They also resolve against the root element's writing-mode specifically, never a locally-scoped one, which is the detail most likely to trip someone up.

• Tutorial:Dynamic Viewport Width Units: dvw, svw, and lvw

  Width-axis siblings of dvh/svh/lvh, useful for full-bleed breakouts.

  dvw, svw, and lvw mirror dvh/svh/lvh onto the width axis, but the browser chrome that makes dvh diverge from vh is a vertical UI element — so on virtually every current browser, all four width units render identically. Where they actually earn their place is different: full-bleed breakouts and edge-to-edge mobile carousels, not a live-resizing address bar.

• Tutorial:Dynamic Viewport Height Units: dvh, svh, and lvh

  Tracks the mobile address bar's actual visible height live.

  100vh has always meant the LARGEST possible viewport on mobile, so content sits behind the address bar until it's scrolled away. svh assumes the smallest viewport, lvh assumes the largest, and dvh is the only one of the three that tracks the browser chrome's actual current state, live.