# Breakpoints strategy — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/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.

```css
: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; }
}
```

**Quiz:** Should breakpoints be based on devices or content?

- [x] Content
- [ ] Device names
- [ ] Popular devices only

*Answer:* Content. Content-driven breakpoints work for any device, known or unknown.