Responsive Design

---
name: Responsive Design
description: Adapt gracefully across viewports.
---
# Responsive Design

Design one fluid system that adapts, not N fixed breakpoint layouts. Content should reflow sensibly from 320px to 1920px without bespoke work per width.

## Approach
- **Mobile-first.** Write the base for the smallest target, then add capability with min-width media queries. This keeps the small screen lean instead of subtracting from a desktop design.
- **Fluid type and spacing.** `clamp(min, preferred, max)` lets type scale with viewport without snapping. Avoid magic pixel widths that break between breakpoints.
- **Content-based breakpoints.** Break when the *content* looks wrong, not at device widths. Devices change; line-length problems don't.
- **Touch targets ≥ 44px.** Fingers are blunt. Packed tap targets on mobile cause mis-taps.