# Breakpoints रणनीति — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/breakpoints-strategy

> Device names के आधार पर नहीं, content के आधार पर breakpoints चुनें — अर्थपूर्ण thresholds पर अपने design को test करें और refine करें।

## Content-driven breakpoints

"iPhone (375px)" या "iPad (768px)" के लिए design करने के बजाय, किसी भी चौड़ाई पर अपना layout design करें, फिर देखें कि यह कहाँ टूटता है। वहाँ एक breakpoint जोड़ें। यह उन devices को सम्मान करता है जिनके बारे में आपने अभी सोचा नहीं है।

## Browser में test करें, कागज पर नहीं

DevTools खोलें → Toggle device toolbar। Viewport को 320px से धीरे-धीरे ऊपर resize करें। जब text अजीब तरीके से wrap हो या images overflow हो, तो वहाँ एक breakpoint जोड़ें। Real user behavior guessing से बेहतर design guide करता है।

## एक लचीली breakpoint system

Breakpoints को centralize करने के लिए CSS variables का उपयोग करें, जिससे उन्हें 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:** Breakpoints devices या content के आधार पर होने चाहिए?

- [x] Content
- [ ] Device names
- [ ] Popular devices केवल

*Answer:* Content. Content-driven breakpoints किसी भी device के लिए काम करते हैं।