लोड हो रहा है...

CSS ब्रेकपॉइंट

Media Queries ने सिखाया @media कैसे चलता है। Responsive Images ने बताया चित्र उन slots में कैसे फिट होते हैं जो queries बनाती हैं। Breakpoints योजना हैं: कुछ चौड़ाइयाँ जहाँ layout रणनीति बदलती है — columns, nav, spacing — एक बार नाम दें और दोहराएँ ताकि पूरा साइट एक कदम पर चले।

Breakpoint toolkit

📊 Breakpoints एक नज़र

टुकड़ा रोज़ का काम
Breakpoint योजनाबद्ध चौड़ाई जहाँ layout rules बदलें
Content-driven choice जहाँ design tight या खाली लगे — phone SKU नहीं
Named steps (sm, md, lg…) हर जगह same token; audit और team काम आसान
Mobile-first ladder Base = संकीर्ण; min-width steps सुधार जोड़ते हैं
Fluid between steps %, rem, Flex/Grid — नई query से पहले
Documented set comments या tokens में छोटी सूची — बीस अलग-अलग values नहीं

Breakpoint «iPhone» नहीं है। यह है «जब sidebar article के बगल में नहीं बैठता» या «जब nav पंक्ति बन सकती है»। Content देखें; फिर एक shared step लिखें।

पहले content — device catalog नहीं

Browser resize करें जब तक कुछ टूटे: line बहुत लंबी, cards दबी, space होते हुए भी hamburger। उस चौड़ाई को rem (या em) में नोट करें। Phone pixel marketing table copy करने से बेहतर।

निर्णय पर कमेंट, device पर नहीं

css 
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}

Device-by-device pixel lists जल्दी पुरानी — हर साल नए phones। कुछ content-driven steps ज़्यादा देर तक काम आते हैं और stylesheet readable रहती है।

Steps को नाम दें — same widths दोहराएँ

Typical site के लिए दो से चार steps काफी। comments में (या width values वाली CSS custom properties) छोटे नाम। जो component «wide layout» शुरू करे वही number — header में 720px और grid में 768px नहीं।

नामित breakpoint tokens (custom properties)

css 
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}

/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

Classic CSS में @media हर browser में custom property को condition की तरह नहीं पढ़ सकता जैसा चाहें — :root tokens documentation और JS/tooling समझें; matching literals sync रखें। जो आदत मायने रखती है: एक shared ladder, हर file में random widths नहीं।

Mobile-first ladder

Queries बिना narrow defaults लिखें। हर min-width step columns, बड़ा type, या horizontal nav जोड़ता है। हर step पर पूरा page न लिखें — एक clear layer बदलें।

तीन-चरण mobile-first ladder

css 
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}

@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}

.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

Desktop-first tightening (जब wide से शुरू)

Project पहले से wide layout ship करे तो max-width queries छोटे viewports पर columns समेट सकती हैं। Consistent रहें: एक component के लिए बिना कारण min-width और max-width mix न करें।

एक step में desktop-first tighten

css 
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}

@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}

हर project में एक direction पसंद करें। Media Queries ने min-width vs max-width syntax cover किया — यहाँ नियम strategy है: shared steps, हर जगह same philosophy।

एक step, कई components

जब --bp-lg (या 64rem) fire हो, nav, grid, spacing एक साथ update करें अगर वे same layout chapter के हैं। बिखरे «लगभग same» widths bugs: header main grid से पहले flip।

nav और main के लिए shared large step

css 
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}

पहले fluid — फिर queries

Breakpoints के बीच Flex, Grid, %, rem छोटी width changes पहले से सँभालें। नई query तभी जब structural बदलाव चाहिए (column count, अलग nav pattern)। ज़्यादा queries = ज़्यादा professional नहीं।

खुद try करें

  1. Practice page resize करें और दो widths लिखें जहाँ layout सच में बदलना हो।
  2. उन्हें rem में बदलें और नाम दें (md, lg)।
  3. वही दो min-width card grid और nav दोनों पर लगाएँ।
  4. CSS में और min-width/max-width numbers खोजें — near-duplicates merge करें।
  5. Fluid base (gap, minmax, wrapping) बेहतर करके एक unnecessary query हटाएँ।

Common mistakes

  • हर phone width catalog content pain points की जगह
  • बारह overlapping queries, थोड़े अलग pixel values
  • Header 768px, main 800px, footer 720px
  • Fluid CSS skip करके हर nudge के लिए नया @media
  • Ladder plan की जगह @media braces या srcset दोबारा सिखाना

Summary

  • Breakpoints planned layout steps — छोटा set नाम दें और reuse
  • Widths content stress से, device marketing tables से नहीं
  • Mobile-first min-width ladder पसंद; project में एक direction
  • Steps के बीच fluid; query सिर्फ structural changes
  • Responsive module यहाँ समाप्त — अगला: Effects & Motion में Box Shadow

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
8
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 57 का 61
Css ट्यूटोरियल