Media Queries

Media Queries क्या है?

Media queries में CSS की एक विशेषता है, जो webpage content को विभिन्न स्क्रीन आकारों और संकल्पों के अनुकूल बनाने में सक्षम बनाता है। वे उत्तरदायी web design का एक मूलभूत हिस्सा हैं, और कई उपकरणों के लिए website की उपस्थिति को अनुकूलित करने के लिए उपयोग किया जाता है।

Media queries को webpage के HTML में डाला जा सकता है, या webpage द्वारा संदर्भित एक अलग .CSS file में शामिल किया जा सकता है।

नीचे एक साधारण मीडिया क्वेरी का एक उदाहरण दिया गया है:

@media screen and (max-width: 768px)
{
header { height: 70px; }
article { font-size: 14px; }
img { max-width: 480px; }
}

यदि उपयोगकर्ता की browser window 768 pixel चौड़ी या उससे कम है, तो उपरोक्त मीडिया क्वेरी सक्रिय हो जाती है। ऐसा तब हो सकता है जब आप Desktop computer पर अपनी window को सिकोड़ते हैं, या यदि आप webpage देखने के लिए Mobile device, जैसे Tablet, का उपयोग कर रहे हैं।

media-Queries-kya-hai

प्रतिक्रियाशील वेब डिज़ाइन में, मीडिया क्वेरीज़ विभिन्न स्क्रीन आकारों के लिए filter के रूप में कार्य करती हैं। cascading style sheet के सभी मॉड्यूल की तरह, जो सूची में और नीचे दिखाई देते हैं, वे ऊपर वाले को ओवरराइड करते हैं। इसलिए, डिफ़ॉल्ट शैलियों को आमतौर पर पहले CSS document में परिभाषित किया जाता है, उसके बाद विभिन्न स्क्रीन आकारों के लिए मीडिया क्वेरीज़ को परिभाषित किया जाता है। उदाहरण के लिए, डेस्कटॉप शैलियों को पहले परिभाषित किया जा सकता है, उसके बाद टैबलेट उपयोगकर्ताओं के लिए शैलियों के साथ मीडिया क्वेरी, उसके बाद smartphone उपयोगकर्ताओं के लिए डिज़ाइन की गई मीडिया क्वेरी। शैलियों को विपरीत क्रम में भी परिभाषित किया जा सकता है, जिसे “mobile first” विकास माना जाता है।

जबकि न्यूनतम-चौड़ाई मीडिया प्रश्नों में उपयोग की जाने वाली सबसे आम विशेषता है, कई अन्य भी उपलब्ध हैं। उदाहरणों में न्यूनतम-उपकरण-चौड़ाई, न्यूनतम-उपकरण-ऊंचाई, पक्ष-अनुपात, अधिकतम-रंग-सूचकांक, अधिकतम-रिज़ॉल्यूशन, अभिविन्यास (min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation, and resolution) और संकल्प शामिल हैं। उदाहरण के लिए, रिज़ॉल्यूशन मान का उपयोग HiDPI display (जैसे retina displays) का पता लगाने और मानक image के बजाय high-resolution graphics लोड करने के लिए किया जा सकता है।