| description | Use when building a layout that must look correct from 320px phones to 3840px ultrawide monitors without breakpoint cliffs, when fluid typography is needed so headings scale continuously between viewports instead of jumping at media-query breakpoints, when the same card or panel component must reflow inside both a narrow sidebar and a wide main column (a job for container queries, not media queries), when an iOS Safari hero with `100vh` clips behind the URL bar or jumps as the bar shrinks, when a card grid must adapt column count without enumerating pixel breakpoints, when an image or video needs to hold a proportional box before its content loads, or when a flex row's children overflow because each child carries a non-zero `min-width: auto`. Prevents the fixed-pixel-breakpoint cliff anti-pattern, viewport-unit traps on mobile (`100vh` clipping behind iOS URL bar), `clamp()` formulas whose `preferred` value resolves outside the `min`/`max` bracket and silently behaves like a constant, container queries that "do not work" because no ancestor has a `container-type`, `max-width: 100vw` overflow when a scrollbar widens the viewport, `flex-wrap` with default `min-width: auto` children blowing out the container, physical margin properties (`margin-left`, `margin-right`) that fail in RTL contexts, and unbounded fluid type that violates WCAG 1.4.4 200% zoom. Covers mobile-first authoring (`min-width` media queries only, progressive enhancement), the container-query-versus-media-query rule (component context = container query; viewport / device = media query), fluid typography via `clamp(min, preferred, max)` with the slope formula `clamp(MIN_REM, BASELINE_REM + SLOPE_VW, MAX_REM)`, the modern viewport-unit family (`vh` / `vw` / `vi` / `vb`, the `sv*` / `lv*` / `dv*` variants for mobile dynamic chrome), `aspect-ratio` for proportional sizing without padding-hack, intrinsic sizing keywords (`min-content`, `max-content`, `fit-content()`), CSS logical properties for RTL-safe spacing (`margin-block`, `margin-inline`, `padding-block`, `padding-inline`, `inset-block`, `inset-inline`), and the no-breakpoint-cliff principle (fluid first, breakpoints only where layouts MUST swap topology). Keywords: responsive layout, fluid layout, fluid typography, mobile-first, desktop-first, breakpoint, breakpoint cliff, clamp, viewport unit, vw, vh, vi, vb, dvh, dvw, svh, svw, lvh, lvw, dynamic viewport, small viewport, large viewport, container query, container-type, container-name, @container, cqi, cqw, cqh, cqb, cq unit, media query, min-width, max-width, aspect-ratio, intrinsic sizing, min-content, max-content, fit-content, logical properties, margin-block, margin-inline, padding-block, padding-inline, block-size, inline-size, inset-block, inset-inline, card grid, card layout, repeat auto-fill, repeat auto-fit, minmax, subgrid, flex-wrap, min-width 0, RTL, right-to-left, layout breaks on mobile, viewport bug iOS, viewport URL bar, breakpoint cliff, font too small on mobile, container does not adapt, container query not working, card wrapping wrong, how to make responsive layout, what is fluid typography, when to use container query, fluid font size, how do I make a responsive layout, modern responsive design, container queries vs media queries, card grid layout.
|
