Responsive Design
Adapting to available space and user conditions: fluid layout, media and container queries, responsive images, CSS pixels versus device pixels, and typography that survives translation.
Percentages, `min()`, `max()`, `clamp()` and the intrinsic behaviour of flex and grid express continuous adaptation; a breakpoint is what you reach for when the change genuinely cannot be continuous.
Width is one axis. Colour scheme, reduced motion, contrast, pointer precision, hover capability and orientation are separate questions — and the preference ones are accessibility features, not theming.
A component should respond to the space it was given, not to the viewport it happens to be inside — which is why `container-type` establishes containment, and why that containment has real layout consequences.
`srcset` and `sizes` for resolution switching, `<picture>` for art direction and format, `loading` and `decoding` for scheduling — and `width`/`height` or `aspect-ratio` always, so the browser can reserve the space.
CSS pixels, device pixels and the ratio between them; the layout viewport versus the visual viewport; the one viewport meta tag worth writing — and why suppressing zoom is an accessibility failure, not a layout fix.
Fluid type with `clamp()` that still honours the user's font size, a measure defined in characters rather than pixels, and layouts that survive a translation two-thirds longer than the English it was designed around.