Breakpoints रणनीति

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 करना आसान हो।

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

त्वरित जाँच: Breakpoints devices या content के आधार पर होने चाहिए?

• Content
• Device names
• Popular devices केवल