न्यूनतम चौड़ाई और अधिकतम चौड़ाई मीडिया प्रश्नों के लिए वाक्यविन्यास
उत्तरदायी वेब डिज़ाइन वेबपृष्ठ बनाने के लिए एक दृष्टिकोण है जहां वे पृष्ठ विज़िटर के स्क्रीन आकार के आधार पर गतिशील रूप से अपना लेआउट और उपस्थिति बदल सकते हैं। बड़ी स्क्रीन उन बड़े डिस्प्ले के लिए उपयुक्त लेआउट प्राप्त कर सकती है, जबकि छोटे डिवाइस, जैसे मोबाइल फोन, उसी छोटी स्क्रीन के लिए उपयुक्त तरीके से प्रारूपित एक ही वेबसाइट प्राप्त कर सकते हैं। यह दृष्टिकोण सभी उपयोगकर्ताओं के लिए बेहतर उपयोगकर्ता अनुभव प्रदान करता है और यह खोज इंजन रैंकिंग को बेहतर बनाने में भी मदद कर सकता है। उत्तरदायी वेब डिज़ाइन का एक महत्वपूर्ण हिस्सा सीएसएस मीडिया क्वेरीज़ है।
मीडिया क्वेरीज आपकी वेबसाइट की सीएसएस फ़ाइल के अंदर थोड़ा सशर्त बयान की तरह हैं, जो आपको कुछ सीएसएस नियम निर्धारित करने की इजाजत देता है जो एक निश्चित शर्त मिलने के बाद ही प्रभावित हो जाएंगे - जैसे कि स्क्रीन का आकार कुछ थ्रेसहोल्ड से ऊपर या नीचे होता है।
कार्रवाई में मीडिया क्वेरीज़
तो आप वेबसाइट पर मीडिया क्वेरीज़ का उपयोग कैसे करते हैं? यहां एक बहुत ही सरल उदाहरण है:
- आप किसी भी दृश्य शैली से मुक्त एक अच्छी तरह से संरचित HTML दस्तावेज़ से शुरू करेंगे (यही सीएसएस के लिए है)
- अपनी सीएसएस फ़ाइल में, आप सामान्य रूप से पृष्ठ को स्टाइल करके और वेबसाइट को कैसे देखेंगे इसके लिए बेसलाइन सेट करके शुरू करेंगे। मान लें कि आप पृष्ठ का फ़ॉन्ट आकार 16 पिक्सेल होना चाहते हैं, आप यह सीएसएस लिख सकते हैं: बॉडी {फ़ॉन्ट-साइज: 16 पीएक्स; }
- अब, आप बड़ी स्क्रीन के लिए उस फ़ॉन्ट आकार को बढ़ाना चाहते हैं जिसमें ऐसा करने के लिए पर्याप्त अचल संपत्ति है। यह वह जगह है जहां मीडिया क्वेरीज़ लात मारते हैं। आप इस तरह एक मीडिया क्वेरी शुरू करेंगे: @media स्क्रीन और (न्यूनतम चौड़ाई: 1000px) {}
- यह एक मीडिया क्वेरी का वाक्यविन्यास है। मीडिया मीडिया को स्थापित करने के लिए यह @media से शुरू होता है। इसके बाद आप "मीडिया प्रकार" सेट करते हैं, जो इस मामले में "स्क्रीन" है। यह डेस्कटॉप कंप्यूटर स्क्रीन, टैबलेट, फोन इत्यादि पर लागू होता है। अंत में, आप मीडिया क्वेरी को "मीडिया फीचर" के साथ समाप्त करते हैं। उपरोक्त हमारे उदाहरण में, यह "मध्य-चौड़ाई: 1000 पीएक्स" है। इसका मतलब यह है कि मीडिया क्वेरी न्यूनतम पिक्सेल चौड़ाई की चौड़ाई के साथ डिस्प्ले के लिए लात जाएगी।
- मीडिया क्वेरी के इन तत्वों के बाद, आप किसी भी सामान्य सीएसएस नियम में जो भी करेंगे, उसके समान आप एक उद्घाटन और समापन घुंघराले ब्रेस जोड़ते हैं।
- मीडिया क्वेरी के लिए अंतिम चरण उन सीएसएस नियमों को जोड़ना है जिन्हें आप इस स्थिति को पूरा करने के बाद आवेदन करना चाहते हैं। आप इन प्रश्नों को घुमावदार ब्रेसिज़ के बीच जोड़ते हैं जो मीडिया क्वेरी बनाते हैं, जैसे: @media स्क्रीन और (न्यूनतम-चौड़ाई: 1000px) {body {font-size: 20px; }
- जब मीडिया क्वेरी की शर्तों को पूरा किया जाता है (ब्राउज़र विंडो कम से कम 1000 पिक्सल चौड़ी होती है), तो यह सीएसएस शैली प्रभावी हो जाएगी, जो हमारी साइट के फ़ॉन्ट आकार को 16 पिक्सेल से बदलती है जिसे हमने मूल रूप से 20 पिक्सेल के नए मूल्य पर स्थापित किया है।
अधिक शैलियों को जोड़ना
आप अपनी वेबसाइट की दृश्य उपस्थिति को समायोजित करने के लिए आवश्यकतानुसार इस मीडिया क्वेरी के भीतर कई सीएसएस नियम रख सकते हैं। उदाहरण के लिए, यदि आप फ़ॉन्ट आकार को केवल 20 पिक्सल तक नहीं बढ़ाना चाहते हैं, लेकिन सभी अनुच्छेदों का रंग काला (# 000000) में भी बदलना चाहते हैं, तो आप इसे जोड़ सकते हैं:
@media स्क्रीन और (न्यूनतम चौड़ाई: 1000 पीएक्स) {शरीर {फ़ॉन्ट आकार: 20 पीएक्स; } पी {रंग: # 000000; }}अधिक मीडिया क्वेरी जोड़ना
इसके अतिरिक्त, आप प्रत्येक बड़े आकार के लिए अधिक मीडिया क्वेरीज़ जोड़ सकते हैं, उन्हें अपनी स्टाइल शीट में जोड़ना:
@media स्क्रीन और (न्यूनतम चौड़ाई: 1000 पीएक्स) {शरीर {फ़ॉन्ट आकार: 20 पीएक्स; } पी {रंग: # 000000; {} @media स्क्रीन और (न्यूनतम चौड़ाई: 1400 पीएक्स) {शरीर {फ़ॉन्ट आकार: 24 पीएक्स; }}पहली मीडिया क्वेरी 1000 पिक्सल चौड़ी पर किक कर देगी, फ़ॉन्ट आकार को 20 पिक्सेल में बदल देगा। फिर, जब ब्राउज़र 1400 पिक्सेल से ऊपर था, तो फ़ॉन्ट का आकार फिर से 24 पिक्सल तक बदल जाएगा। आप अपनी विशेष वेबसाइट के लिए आवश्यकतानुसार कई मीडिया क्वेरीज़ जोड़ सकते हैं।
न्यूनतम चौड़ाई और अधिकतम चौड़ाई
"न्यूनतम चौड़ाई" या "अधिकतम-चौड़ाई" के साथ मीडिया क्वेरीज़ लिखने के आम तौर पर दो तरीके होते हैं। अब तक, हमने कार्रवाई में "न्यूनतम चौड़ाई" देखी है। ब्राउज़र कम से कम उस चौड़ाई तक पहुंचने के बाद मीडिया क्वेरीज़ प्रभावी हो सकती हैं। इसलिए जब कोई ब्राउज़र कम से कम 1000 पिक्सल चौड़ा होता है तो "min-width: 1000px" का उपयोग करने वाली क्वेरी लागू होगी। मीडिया क्वेरी का यह शैली तब उपयोग किया जाता है जब आप किसी साइट को "मोबाइल-प्रथम" तरीके से बनाते हैं।
यदि आप "अधिकतम-चौड़ाई" का उपयोग करते हैं, तो यह विपरीत तरीके से काम करता है। ब्राउजर इस आकार से नीचे गिरने के बाद "अधिकतम-चौड़ाई: 1000 पीएक्स" की मीडिया क्वेरी लागू होगी।
पुराने ब्राउज़र के बारे में
मीडिया क्वेरीज़ के साथ एक चुनौती इंटरनेट एक्सप्लोरर पर पुराने संस्करणों में समर्थन की कमी है। शुक्र है, ऐसे पॉलीफिल उपलब्ध हैं जो उन पुराने ब्राउज़रों में मीडिया क्वेरीज़ के लिए समर्थन पैच कर सकते हैं, जिससे आप आज भी वेबसाइटों पर उनका उपयोग कर सकते हैं, जबकि यह सुनिश्चित करना कि उस साइट का प्रदर्शन पुराने ब्राउज़र सॉफ़्टवेयर में टूटा नहीं दिखता है।
जेरेमी गिरार्ड द्वारा 1/24/17 को संपादित किया गया