CSS मीडिया क्वेरी
रिस्पॉन्सिव डिज़ाइन ने मानसिकता तय की: एक HTML ट्री, viewport meta, तरल शेल, सापेक्ष इकाइयाँ। मीडिया क्वेरी वही स्विच है — CSS के ब्लॉक जो केवल तब चालू होते हैं जब शर्त मेल खाए (अक्सर viewport की चौड़ाई)। यह पाठ सिंटैक्स और शांत आदतें सिखाता है; रिस्पॉन्सिव इमेज और Breakpoints आगे टूलकिट गहरा करते हैं।
मीडिया क्वेरी टूलकिट
📊 मीडिया क्वेरी एक नज़र में
| टुकड़ा | रोज़ का काम |
|---|---|
@media |
सशर्त CSS ब्लॉक खोलता है |
मीडिया फ़ीचर (min-width, max-width, …) |
वह परीक्षण जो ब्राउज़र सुलझाता है |
and |
सूचीबद्ध हर फ़ीचर का मेल ज़रूरी |
| अल्पविराम से अलग क्वेरी | तार्किक या — कोई भी मेल खाने वाली सूची लागू |
{ } के अंदर नियम सेट |
वे स्टाइल जो केवल क्वेरी मिलने तक लागू होते हैं |
मीडिया प्रकार (screen, print) |
आउटपुट माध्यम के लिए वैकल्पिक फ़िल्टर |
बिना क्वेरी के हर नियम «हमेशा चालू» होता है। उनके साथ आप पिछली पाठ की मज़बूत नींव रखते हैं और बदलाव परत-दर-परत जोड़ते हैं — चौड़े कॉलम, बड़ा टाइप, अलग नेव — केवल जब viewport उन्हें संभाल सके।
@media की बनावट
क्लासिक पैटर्न: कोष्ठक में फ़ीचर, फिर सामान्य घोषणाओं वाला ब्रेस ब्लॉक। चौड़ाई के लिए जहाँ हो सके rem या em इस्तेमाल करें — ये रूट/टाइप सेटिंग के साथ हार्ड डिवाइस-पिक्सल सूचियों से बेहतर स्केल होते हैं।
.nav {
display: block;
}
@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}
min-width के साथ mobile-first
संकीर्ण लेआउट बेस स्टाइलशीट में लिखें। @media (min-width: …) से viewport बढ़ने पर सुधार जोड़ें। हर कदम एक साफ़ परत बदले — स्पेसिंग, कॉलम, या नेविगेशन — हर कदम पर पूरा पेज दोबारा न लिखें।
.hero {
padding: 1rem;
font-size: 1.125rem;
}
@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}
@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
max-width के साथ desktop-first
अगर बेस चौड़ा लेआउट है, तो @media (max-width: …) एक सीमा के नीचे स्टाइल कसता है — कॉलम स्टैक, padding घटाएँ, क्रोम सरल करें। प्रोजेक्ट में एकरुप रहें: बिना वजह शुद्ध min-width और शुद्ध max-width स्टैक के बीच न कूदें।
.sidebar {
width: 16rem;
float: left;
}
@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}
and से फ़ीचर जोड़ना
फ़ीचर इस तरह जोड़ें कि सभी मेल खाएँ। रेंज (min और max साथ) या चौड़ाई को किसी और फ़ीचर से जोड़ना — दोनों में उपयोगी। पूरे @media सूचियों के बीच अल्पविराम का मतलब या।
.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}
चौड़ाई से आगे — प्रिंट (और शांत अतिरिक्त)
चौड़ाई रोज़ का औज़ार है। print जैसे प्रकार कागज़ के लिए क्रोम छिपाते हैं। प्राथमिकता फ़ीचर (जैसे prefers-reduced-motion) पहुँच-योग्यता की पॉलिश हैं — यहाँ संयम से; Breakpoints पाठ रणनीति सजाता है, और पहुँच-योग्यता गति बाद में कवर करती है।
@media print {
.site-nav,
.ad-slot {
display: none;
}
body {
color: #000;
background: #fff;
}
}
Breakpoint की शांत आदत
नामित चौड़ाई की छोटी सूची चुनें जो आपके लेआउट तनाव बिंदुओं से मेल खाए — हर फ़ोन मॉडल से नहीं। उन्हें दस्तावेज़ करें (जैसे «48rem से नीचे नेव सिमटती है»)। तरल बेस + कुछ क्वेरी, हर डिवाइस के लिए नियमों के जंगल से बेहतर। अगले पाठ: इमेज और पूरा breakpoint प्लान।
खुद आज़माएँ
- स्टैक्ड नेव लें और एक
@media (min-width: …)जोड़ें जो उसे flex करे। - वही विचार desktop-first
max-widthकसने से दोबारा लिखें — बेस स्टाइल का फ़र्क देखें। - केवल दो-कॉलम बैंड के लिए
min-widthऔरmax-widthवाली रेंज क्वेरी जोड़ें। @media printसे सजावटी बैनर छिपाएँ।- अभ्यास पेज के लिए तीन नामित breakpoint लिखें — सूची छोटी रखें।
आम गलतियाँ
- लेआउट तनाव बिंदुओं की जगह हर डिवाइस ब्रांड के लिए अलग क्वेरी
- बंद करने वाला
}भूल जाना ताकि आगे का CSS क्वेरी में गायब हो जाए - min-width और max-width स्टैक बेतरतीब मिलाकर cascade का खुद से लड़ना
- केवल क्वेरी पर निर्भर रहना और रिस्पॉन्सिव डिज़ाइन के तरल कंटेनर व सापेक्ष इकाइयाँ नज़रअंदाज़ करना
- यहाँ लंबी breakpoint कैटलॉग डालना — वह शिल्प Breakpoints में जारी रहता है; इमेज Responsive Images में
सारांश
- मीडिया क्वेरी CSS को लपेटती हैं ताकि शर्त मिलने पर ही लागू हो
min-widthऊपर की ओर सुधारता है (mobile-first);max-widthनीचे की ओर कसता है (desktop-first)andसभी फ़ीचर चाहता है; क्वेरी के बीच अल्पविराम या का काम करता है- कुछ नामित breakpoint, असली लेआउट ज़रूरत से जुड़े रखें
- अगला: रिस्पॉन्सिव इमेज — मीडिया जो स्केल हो और कॉलम न तोड़े
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी