An adaptive layout changes a page’s dimensions, arrangement, or visible elements when screen conditions change. Media queries act like browser questions: if the viewport matches, the browser applies the styles; otherwise, it ignores them. section 14.4 section 14.0
Build an adaptive layout by combining a few practical habits:
- Start with a mobile-first layout, then use media queries to add features or rearrange content for larger screens. section 14.12
- Use max-width for screens no wider than a threshold and min-width for screens at least as wide as a threshold. section 14.4
- Prefer liquid measurements, fluid images, and rem units instead of fixed pixel dimensions for widths, spacing, and type. section 14.12
Stacking a grid on small screens
A three-column grid can become a single-column stack below 450 pixels, while the page title shrinks below 350 pixels. The same page therefore keeps its content usable without forcing horizontal scrolling. section 14.4
