Lesson 4 / 25

Breakpoints strategy

Choose breakpoints based on content, not device names — test and refine your design at meaningful thresholds.

Content-driven breakpoints

Instead of designing for "iPhone (375px)" or "iPad (768px)", design your layout at any width, then find where it breaks. Add a breakpoint there. This respects devices you haven't thought of yet.

Test in the browser, not on paper

Open DevTools → Toggle device toolbar. Resize the viewport slowly from 320px up. When text wraps awkwardly or images overflow, add a breakpoint there. Real user behavior guides better design than guessing.

A flexible breakpoint system

Use CSS variables to centralize breakpoints, making them easy to tweak.

:root {
  --bp-mobile: 320px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
}

@media (min-width: var(--bp-tablet)) {
  .layout { display: grid; grid-template-columns: 1fr 2fr; }
}

Quick check: Should breakpoints be based on devices or content?

  • Content
  • Device names
  • Popular devices only
Answer

Content — Content-driven breakpoints work for any device, known or unknown.