Responsive Design Fundamentals: Mobile-First, Breakpoints, Media Queries

"Mobile-first" gets treated as a values statement about caring about mobile users. It's actually a specific technical strategy about which direction your media queries point, and there's a concrete, mechanical reason it's the better default.

The two possible strategies

/* Desktop-first: base styles assume desktop, media queries SUBTRACT complexity */
.sidebar { display: flex; width: 240px; }
@media (max-width: 640px) { .sidebar { display: none; } }

/* Mobile-first: base styles assume mobile, media queries ADD complexity */
.sidebar { display: none; }
@media (min-width: 640px) { .sidebar { display: flex; width: 240px; } }

Both examples produce the same visual result. The difference is what the *unstyled base case* defaults to, and that difference compounds as a real site grows past a toy example.

The actual mechanical reason mobile-first wins

Desktop-first means every property you might need to override on mobile has to be explicitly un-set inside a `max-width` query — miss one, and a desktop-only style leaks onto mobile with no build error, just a visual bug found later. Mobile-first means the base styles ARE the mobile styles — there's nothing to "undo," because nothing more complex was ever applied by default. A missed breakpoint fails safe (you get the simpler mobile layout everywhere) instead of failing broken (a complex desktop style leaking onto a phone screen).

Why this matters more than it sounds like

This site's own design decisions log locks "mobile → tablet → desktop, always" as a build order for exactly this reason — and it's why Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`) are unprefixed-first, min-width-based by default: `flex sm:hidden` means "flex on mobile, hidden from `sm` up," the base utility applies to the smallest screen and prefixed variants only ever ADD behavior at larger sizes, matching the mobile-first strategy exactly, not by coincidence.

Breakpoint values, practically

Common conventions cluster around ~640px (large phone/small tablet), ~768px (tablet), ~1024px (small laptop), ~1280px (desktop) — Tailwind's defaults land close to these. The actual right answer for any given design is "wherever the content itself starts to look cramped or awkwardly spaced," tested by resizing a real browser window, not a fixed list of device widths to target blindly.