Breakpoints strategy

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

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

• Device names
• Popular devices only
• Always the width of the newest iPhone
• Content