आप CSS मीडिया क्वेरी कैसे लिखते हैं?

@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 1000px) { }

यह मीडिया क्वेरी का सिंटैक्स है। से शुरू होता है @मीडिया मीडिया क्वेरी को ही स्थापित करने के लिए। इसके बाद, मीडिया प्रकार सेट करें, जो इस मामले में है स्क्रीन. यह प्रकार डेस्कटॉप कंप्यूटर स्क्रीन, टैबलेट, फोन आदि पर लागू होता है। मीडिया क्वेरी को इसके साथ समाप्त करें मीडिया सुविधा. ऊपर हमारे उदाहरण में, वह है मध्य-चौड़ाई: 1000px. इसका मतलब है कि मीडिया क्वेरी 1000 पिक्सेल की न्यूनतम चौड़ाई वाले डिस्प्ले के लिए शुरू होती है।

मीडिया क्वेरी के इन तत्वों के बाद, एक ओपनिंग और क्लोजिंग कर्ली ब्रेस जोड़ें, जैसा कि आप किसी भी सामान्य सीएसएस नियम में करते हैं।

मीडिया क्वेरी का अंतिम चरण इस शर्त के पूरा होने के बाद लागू करने के लिए CSS नियमों को जोड़ना है। इन सीएसएस नियमों को मीडिया क्वेरी बनाने वाले घुंघराले ब्रेसिज़ के बीच डालें, जैसे:

 @मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 1000px) {शरीर {फ़ॉन्ट-आकार: 20px; }

जब मीडिया क्वेरी की शर्तें पूरी होती हैं (ब्राउज़र विंडो कम से कम 1000 पिक्सेल चौड़ी होती है), तो यह सीएसएस शैली प्रभावी होता है, हमारी साइट के फ़ॉन्ट आकार को हमारे द्वारा मूल रूप से स्थापित किए गए 16 पिक्सेल से बदलकर 20. के हमारे नए मान में बदल देता है पिक्सल। 





instagram viewer
 अधिक शैलियाँ जोड़ना 

जितने स्थान Place सीएसएस नियम अपनी वेबसाइट के दृश्य स्वरूप को समायोजित करने के लिए आवश्यकतानुसार इस मीडिया क्वेरी के भीतर। उदाहरण के लिए, न केवल फ़ॉन्ट आकार को 20 पिक्सेल तक बढ़ाने के लिए, बल्कि सभी अनुच्छेदों का रंग काला (# 000000) में बदलने के लिए, इसे जोड़ें: 
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 1000px) {
तन {
फ़ॉन्ट-आकार: 20px;
}
पी {
रंग: #000000;
}
}
 अधिक मीडिया प्रश्न जोड़ना 

इसके अतिरिक्त, आप प्रत्येक बड़े आकार के लिए और अधिक मीडिया क्वेरीज़ जोड़ सकते हैं, उन्हें इस तरह अपनी स्टाइल शीट में सम्मिलित कर सकते हैं: 
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 1000px) {
तन {
फ़ॉन्ट-आकार: 20px;
}
पी {
रंग: #000000;
{
}
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 1400px) {
तन {
फ़ॉन्ट-आकार: 24px;
}
}

पहली मीडिया क्वेरीज़ १००० पिक्सेल चौड़ी होती हैं, जो फ़ॉन्ट आकार को २० पिक्सेल में बदल देती हैं। फिर, एक बार जब ब्राउज़र १४०० पिक्सेल से ऊपर था, तो फ़ॉन्ट का आकार फिर से २४ पिक्सेल में बदल जाएगा। अपनी विशेष वेबसाइट के लिए जितनी आवश्यकता हो उतनी मीडिया क्वेरी जोड़ें। 
 न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई 

मीडिया क्वेरी लिखने के आम तौर पर दो तरीके हैं—का उपयोग करके न्यूनतम-चौड़ाई या साथ अधिकतम चौड़ाई. अब तक, हमने कार्रवाई में न्यूनतम-चौड़ाई देखी है। ब्राउज़र कम से कम उस न्यूनतम चौड़ाई तक पहुंचने के बाद यह दृष्टिकोण मीडिया क्वेरी को सक्रिय करता है। तो एक क्वेरी जो उपयोग करती है न्यूनतम-चौड़ाई: 1000px तब लागू होता है जब ब्राउज़र कम से कम 1000 पिक्सेल चौड़ा हो। मीडिया क्वेरी की इस शैली का उपयोग तब किया जाता है जब आप किसी साइट को मोबाइल-फर्स्ट तरीके से बना रहे होते हैं। 

यदि तुम प्रयोग करते हो अधिकतम चौड़ाई, यह विपरीत तरीके से काम करता है। "अधिकतम-चौड़ाई: 1000px" की एक मीडिया क्वेरी ब्राउज़र के इस आकार से नीचे आने के बाद लागू होती है। 

इस लेख का हवाला दें।