Responsive Design Techniques

Building layouts, type, and spacing that adapt smoothly to every screen size, from small phones to wide desktops.

Content tagged responsive-design

• 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.

• Tutorial:Fluid Typography and Spacing with clamp()

  One clamp() declaration scales type, padding, and gaps smoothly — no breakpoint ladder.

  clamp(min, preferred, max) — with a preferred value built from rem plus a viewport or container-relative unit — scales font-size, padding, and gaps continuously between a floor and ceiling instead of jumping at fixed breakpoints, replacing a media-query ladder with one line per property.

• Tutorial:min(), max(), and clamp() — CSS's Value-Bounding Functions

  Three comparison functions that pick a value from a rule, without a single media query.

  min(), max(), and clamp() pick the smallest, largest, or a bounded value from a list of CSS expressions at the point of use, replacing media-query-driven overrides for readable measures, safe-area-aware insets, and bounded widths with one declaration each.

• Tutorial:Padding Around the Notch with env()

  Pad fixed UI around notches with env().

  The env() CSS function reads environment variables the browser defines outside your stylesheet — most commonly the four safe-area-inset-* values — letting fixed/sticky content pad itself around a device's notch, home indicator, or rounded corners without hardcoding per-device pixel values.