StableMobileresponsive-web

Responsive Web — Layout & Adaptation

Operationalizes how a web layout adapts across widths: the constraint order mobile-first actually imposes, breakpoints derived from content rather than device names, fluid type and spacing, container queries as the correct unit of component adaptation, the 320px floor and WCAG 1.4.10 reflow, the narrow list of things that may legitimately scroll sideways, the untrustworthy viewport, and responsive images that don't cost layout stability.

responsivemobile-firstlayoutbreakpointscontainer-queriesfluid-typography

Principios

· lvh — largest: the viewport with chrome hidden. Content sized to it is clipped when chrome returns.
· svh — smallest: safe for anything that must never be cut off.
· dvh — dynamic: tracks the current value; correct for scrollable panes, and it reflows as chrome moves.
· env(safe-area-inset-*) — the corners; needs viewport-fit=cover to be non-zero.

Patrones

· Build the 320 version first and demo it. Whatever survives that width is the feature; everything else is enhancement. Exception: none worth the trouble — a wide-first build always costs the narrow one.
· Default to one column, then earn the second. A second column has to justify itself with a real relationship between the two, not with available space.
· Gutters before widths. Decide the page's inline padding first; at 320 it's what stands between the content and the bezel.
· If it fits at 320 and 1440, check 700 and 1100. The in-between widths are where "responsive" designs are ugliest, and nobody opens them.
· Resize until it looks wrong; put the breakpoint there. Then name it after what changed.

Riesgos

· Ver anti-patrones específicos del dominio en el pack.

Checklist

[ ] ★ No document-level horizontal scrolling at 320px: scrollWidth <= clientWidth. (RWE3)
[ ] ★ No content requires scrolling in both axes to be read or operated. (RW3, WCAG 1.4.10)
[ ] ★ Zoom is not suppressed: no user-scalable=no, no maximum-scale below 5. (RWE2, WCAG 1.4.4)
[ ] ★ Every value the user must read while operating a control is visible at 320px with that control focused. (RW8)
[ ] ★ No interactive control sits inside a horizontal scroll region whose identity column is unpinned. (RWE19)
[ ] ★ Every surface is fully operable at 320px — no clipped controls, no unreachable capability, no dialog exceeding the viewport without internal scroll. (RWE8)

Fuentes

En la bibliografía AKOS

Este pack cita las siguientes fuentes registradas en el índice bibliográfico:

Explorar todas las fuentes →