Responsiveness today is fluid by default, breakpoints for layout shifts, components query their own container — not just one fixed grid that snaps at 768px.

1. Viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, mobile defaults to a ~980px layout. See [[why-does-the-viewport-meta-tag-matter-for-mobile-ui]].

2. Relative units

clamp(1rem, 0.8rem + 1vw, 1.5rem) — type fluidly scales between bounds.

3. Mobile-first media queries

.card { padding: 1rem; }
@media (min-width: 48em) { .card { padding: 2rem; } }
@media (min-width: 80em) { .card { padding: 3rem; } }

Use em units in queries so user zoom shifts breakpoints consistently.

4. Container queries

.card-wrap { container-type: inline-size; }
@container (min-width: 30em) { .card { display: flex; } }

The component reacts to its own width, not the viewport — essential for design systems.

5. Layouts: flex + grid

• Flex for one-axis (rows of items).
• Grid for two-axis layouts (grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) auto-wraps).

6. Responsive images

<img srcset="x-400.jpg 400w, x-800.jpg 800w" sizes="(min-width:48em) 50vw, 100vw" src="x-800.jpg">

Or <picture> with <source media> for art direction.

7. Logical properties

margin-inline, padding-block, inset-inline-start — work for LTR + RTL without flipping styles.

8. Touch / pointer

@media (hover: hover) { ... } for hover-only effects on devices that actually hover.

9. Density

@media (prefers-color-scheme: dark), (prefers-reduced-motion), (prefers-contrast: more) — respect user OS settings.

Interview framing

"Fluid layouts with flex/grid, relative units (rem for type, % and fr for layout, clamp for fluid scale), mobile-first @media (min-width) in em units, and container queries for component-local responsiveness. Responsive images via srcset/sizes. Logical properties for i18n. Respect user prefs (prefers-color-scheme, prefers-reduced-motion). And the viewport meta tag is non-negotiable."