CSS media query क्या है: मोबाइल के उदाहरणों के साथ आसान गाइड

CSS media query स्टाइल के किसी ब्लॉक को तभी लागू करती है जब डिवाइस या ब्राउज़र कोई शर्त पूरी करे, जैसे viewport की कम-से-कम चौड़ाई, landscape ओरिएंटेशन या dark कलर स्कीम। @media (min-width: 48rem) { ... } का मतलब है “ये नियम तब लागू करो जब viewport कम-से-कम 48rem चौड़ा हो”। CSS का यही हिस्सा एक ही पेज को फ़ोन, टैबलेट और डेस्कटॉप पर अलग लेआउट दिखाने देता है।

बुनियादी syntax

@media (min-width: 768px) {
  .sidebar { display: block; }
}

media query के तीन हिस्से होते हैं, और तीनों वैकल्पिक हैं:

• media type: screen, print या all (डिफ़ॉल्ट)
• कोष्ठक में एक या ज़्यादा media features, जैसे (min-width: 768px) या (orientation: landscape)
• इन्हें जोड़ने वाले logical operators: and, , (या), और not

@media screen and (min-width: 768px) and (orientation: landscape) { ... }
@media (max-width: 480px), (orientation: portrait) { ... }
@media not print { ... }

media query को पूरी स्टाइलशीट पर भी लगा सकते हैं: <link rel="stylesheet" href="print.css" media="print">।

min-width बनाम max-width

min-width का मतलब है “इतना या इससे ज़्यादा चौड़ा”; max-width का मतलब है “इतना या इससे कम चौड़ा”। आप कौन-सी दिशा चुनते हैं, उसी से तय होता है कि बाक़ी CSS कैसे लिखेंगे।

• Mobile first (सुझाया गया तरीका): बुनियादी स्टाइल फ़ोन के लिए होती हैं, और min-width वाली queries बड़ी स्क्रीन के लिए लेआउट जोड़ती हैं। देखें mobile first डिज़ाइन।
• Desktop first: बुनियादी स्टाइल डेस्कटॉप के लिए होती हैं, और max-width वाली queries छोटी स्क्रीन के लिए चीज़ें वापस बदलती हैं।

/* Mobile first */
.nav { flex-direction: column; }

@media (min-width: 48rem) {
  .nav { flex-direction: row; }
}

एक ही प्रोजेक्ट में दोनों दिशाएँ मिलाने से अक्सर नियम आपस में टकराते हैं या बीच में ख़ाली जगह छूट जाती है। एक चुनें और दूसरी सिर्फ़ छोटे अपवादों के लिए रखें।

नया range syntax

Media Queries Level 4 में तुलना वाले operators जुड़े हैं, जो पढ़ने में आसान हैं और एक पिक्सेल वाली ग़लतियों से बचाते हैं:

@media (width >= 48rem) { ... }
@media (40rem <= width < 64rem) { ... }

Range syntax सभी मौजूदा बड़े ब्राउज़रों में चलता है (Chrome और Edge वर्शन 104 से, Firefox 63 से, Safari 16.4 से)। अगर पुराने Safari वर्शन को सपोर्ट करना है, तो min-width और max-width ही इस्तेमाल करते रहें, या build टूल से इसे बदलवा लें।

ध्यान दें कि (width < 768px) और (max-width: 767px) एक जैसे नहीं हैं: पहला 767.5 px पर भी मेल खाता है, जो दशमलव वाले pixel ratio वाली स्क्रीन पर हो सकता है।

मोबाइल के लिए media queries: आम उदाहरण

छोटी स्क्रीन पर कॉलम ऊपर-नीचे:

.grid { display: grid; gap: 1rem; }

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

फ़ोन पर कम spacing:

.section { padding: 2rem 1rem; }

@media (min-width: 64rem) {
  .section { padding: 6rem 2rem; }
}

कम ऊँचाई वाले landscape फ़ोन:

@media (orientation: landscape) and (max-height: 30rem) {
  .site-header { position: static; }
}

आख़िरी वाला अक्सर भुला दिया जाता है। जो sticky हेडर portrait में ठीक लगता है, वह landscape में स्क्रीन का एक तिहाई हिस्सा घेर सकता है।

कौन-सी चौड़ाई इस्तेमाल करें, यह अलग सवाल है, जिसका जवाब रिस्पॉन्सिव breakpoints में है।

चौड़ाई के अलावा media features

hover और pointer जितने दिखते हैं, उससे ज़्यादा अहम हैं। touch वाले लैपटॉप या डेस्कटॉप जितने चौड़े लेआउट वाले टैबलेट में भी hover नहीं होता, इसलिए सिर्फ़ hover से खुलने वाले मेन्यू को @media (hover: hover) के अंदर रखें।

Breakpoints के लिए rem या em इस्तेमाल करें

rem या em में लिखी media queries यूज़र के ब्राउज़र की फ़ॉन्ट साइज़ सेटिंग के साथ चलती हैं। अगर कोई अपना डिफ़ॉल्ट टेक्स्ट साइज़ 16 px से 24 px कर दे, तो 48rem वाला breakpoint 768 px से 1152 px पर चला जाता है, यानी टेक्स्ट बड़ा होने पर लेआउट ज़्यादा खुले वर्शन में बदल जाता है। पिक्सेल वाले breakpoints इस सेटिंग को अनदेखा करते हैं। media queries के अंदर rem और em दोनों ब्राउज़र के शुरुआती फ़ॉन्ट साइज़ को मानते हैं, CSS में html के लिए सेट किए गए साइज़ को नहीं।

Media queries बनाम container queries

Media queries viewport के हिसाब से बदलती हैं। Container queries किसी एलिमेंट के container के साइज़ के हिसाब से:

.card-wrap { container-type: inline-size; }

@container (min-width: 30rem) {
  .card { display: flex; }
}

पेज के लेआउट (कॉलम, नेविगेशन) के लिए media queries इस्तेमाल करें, और उन कंपोनेंट के लिए container queries जो अलग-अलग चौड़ाई वाली जगहों पर आते हैं।

आम ग़लतियाँ

1. viewport meta tag का न होना। इसके बिना फ़ोन लगभग 980 px का viewport बताते हैं और आपकी मोबाइल media queries कभी चलती ही नहीं। देखें viewport meta tag की पूरी जानकारी।
2. टकराती रेंज, जैसे max-width: 768px और min-width: 768px दोनों ठीक 768 px पर मेल खाती हैं।
3. बुनियादी नियम से पहले media query लिखना। एक जैसी specificity वाले नियमों में बाद वाला जीतता है, इसलिए query उस नियम के बाद आनी चाहिए जिसे वह बदल रही है।
4. सिर्फ़ विंडो छोटी करके टेस्ट करना। डेस्कटॉप ब्राउज़र ज़्यादातर फ़ोन की चौड़ाई तक छोटे नहीं होते। device mode या ऐसा मोबाइल व्यू एक्सटेंशन इस्तेमाल करें जो असली viewport और user agent सेट करे, और रिस्पॉन्सिव डिज़ाइन कैसे टेस्ट करें पढ़ें।

अक्सर पूछे जाने वाले सवाल

मोबाइल फ़ोन के लिए media query कौन-सी है?

फ़ोन के लिए कोई एक query नहीं है। Mobile first CSS में फ़ोन डिफ़ॉल्ट होते हैं, बिना किसी query के, और बड़ी स्क्रीन के लिए @media (min-width: 40rem) जैसी query जोड़ी जाती है। सिर्फ़ छोटी स्क्रीन को टारगेट करना हो तो @media (max-width: 39.99rem) या (width < 40rem) इस्तेमाल करें।

Media queries में px, em या rem में से क्या इस्तेमाल करें?

एक्सेसिबिलिटी के लिए rem या em बेहतर हैं, क्योंकि तब breakpoints यूज़र की फ़ॉन्ट साइज़ सेटिंग के साथ बदलते हैं। px भी चलता है, लेकिन इस सेटिंग को अनदेखा करता है।

CSS में media queries कहाँ लिखें?

या तो उसी कंपोनेंट के पास जिसे वे बदलती हैं, या फ़ाइल के आख़िर में एक जगह। कंपोनेंट के पास रखना संभालने में आसान है, और फिर भी उन्हें बुनियादी नियमों के बाद ही आना चाहिए।