Responsive Design
A page that looks right on your laptop can look broken on a phone: text too small to read, or so huge you scroll sideways to finish a sentence. Responsive design is the set of techniques that make one HTML/CSS codebase adapt to whatever screen loads it, instead of shipping a separate "mobile site."
This guide assumes you're comfortable with CSS, Flexbox, and Grid from Flexbox and Grid. The running example is a 3-column card layout - a common pattern for pricing tables, product grids, and blog previews - taken from a fixed-width layout that breaks on a phone to a fluid one that doesn't.
The phases
- The Viewport and Media Queries - the meta tag that stops
mobile browsers from faking a desktop screen, and
@mediaqueries for applying CSS conditionally. - Fluid Layouts - relative units, wrapping Flexbox/Grid, and
clamp()for typography and spacing that scale without extra breakpoints. - Responsive Images and Mobile-First Workflow -
srcset/sizes,<picture>for art direction, and why writing mobile-first CSS tends to end up simpler.
By the end, the card layout works from a 320px phone to a wide desktop without a separate mobile site.