CSS RWD Media Queries

Syntax से Strategy तक

@media (max-width: 600px) { } syntax जानना काम का सिर्फ आधा हिस्सा है -- responsive breakpoint strategy में असली skill यह तय करना है कि कितने breakpoints इस्तेमाल करें और उन्हें कहाँ रखें, यह किसी generic device-size chart पर नहीं बल्कि इस बात पर आधारित होना चाहिए कि आपका content असल में कहाँ cramped दिखना शुरू होता है।

उदाहरण: From Syntax to Strategy

<style>
.box {
  background: lightblue;
}
@media (max-width: 600px) {
  .box {
    background: lightgreen;
  }
}
</style>
<div class="box">Breakpoint chosen where this content looks cramped</div>

Mobile-First Breakpoint Order

एक mobile-first strategy पहले सबसे छोटी screen के लिए unprefixed styles लिखती है, फिर screen बढ़ने पर min-width media queries layer करती है, इसलिए हर breakpoint सिर्फ complexity ADD करता है (ज़्यादा columns, wider spacing) पहले के rules को override करने के बजाय।

उदाहरण: Mobile-First Breakpoint Order

<style>
.columns {
  display: block;
  background: #eee;
}
@media (min-width: 768px) {
  .columns {
    display: flex;
  }
}
.columns div {
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div class="columns">
  <div>Adds complexity as the screen grows</div>
</div>

Desktop-First Breakpoint Order

एक desktop-first strategy उल्टा करती है -- पूरी desktop styles default हैं, और max-width queries screen shrink होने पर complexity हटाती हैं। यह पुरानी desktop-only sites के retrofits में common है लेकिन आमतौर पर mobile-first से ज़्यादा CSS mobile users को भेजती है।

उदाहरण: Desktop-First Breakpoint Order

<style>
.columns {
  display: flex;
  background: #eee;
}
@media (max-width: 768px) {
  .columns {
    display: block;
  }
}
.columns div {
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div class="columns">
  <div>Strips complexity away as the screen shrinks</div>
</div>

Content-Driven बनाम Device-Driven Breakpoints

specific popular device widths (320px iPhone, 768px iPad, वगैरह) से match करने के लिए breakpoints चुनना fragile है क्योंकि नए devices लगातार आते रहते हैं।

ज़्यादा durable strategy है अपनी browser window resize करना और exactly वहाँ एक breakpoint जोड़ना जहाँ आपका layout टूटना शुरू करता है, चाहे वह किसी भी device से match करे।

उदाहरण: Content-Driven vs Device-Driven Breakpoints

<style>
.text {
  font-size: 16px;
}
@media (max-width: 540px) {
  .text {
    font-size: 14px;
  }
}
</style>
<p class="text">Breakpoint chosen where this layout breaks, not a device width</p>

Common Breakpoint Conventions

ऊपर दी गई content-driven advice के बावजूद, ज़्यादातर teams अभी भी एक starting point के तौर पर round-number ranges के एक छोटे set पर converge होती हैं -- लगभग 576px, 768px, 992px, और 1200px -- क्योंकि वे phones, tablets, और desktops की practical range को इतनी अच्छी तरह cover करती हैं कि हर project में wheel दोबारा invent करने से सबको बचाती हैं।

उदाहरण: Common Breakpoint Conventions

<style>
.container {
  width: 100%;
  background: steelblue;
  color: white;
  padding: 10px;
}
@media (min-width: 576px) { .container { width: 540px; background: seagreen; } }
@media (min-width: 768px) { .container { width: 720px; background: coral; } }
@media (min-width: 992px) { .container { width: 960px; background: darkorange; } }
</style>
<div class="container">Common round-number breakpoints</div>