सीएसएस मीडिया प्रश्न
CSS2 प्रस्तुत मीडिया प्रकार
CSS2 में पेश किए गए @mediaनियम ने विभिन्न मीडिया प्रकारों के लिए अलग-अलग शैली के नियमों को परिभाषित करना संभव बना दिया।
उदाहरण: आपके पास कंप्यूटर स्क्रीन के लिए स्टाइल नियमों का एक सेट हो सकता है, एक प्रिंटर के लिए, एक हैंडहेल्ड डिवाइस के लिए, एक टेलीविज़न-टाइप डिवाइस के लिए, और इसी तरह।
दुर्भाग्य से इन मीडिया प्रकारों को प्रिंट मीडिया प्रकार के अलावा, उपकरणों द्वारा कभी भी बहुत अधिक समर्थन नहीं मिला।
CSS3 की प्रस्तुत मीडिया क्वेरी
CSS3 में मीडिया प्रश्नों ने CSS2 के मीडिया प्रकारों के विचार को बढ़ाया: एक प्रकार के उपकरण की तलाश करने के बजाय, वे डिवाइस की क्षमता को देखते हैं।
मीडिया प्रश्नों का उपयोग कई चीजों की जांच के लिए किया जा सकता है, जैसे:
- व्यूपोर्ट की चौड़ाई और ऊंचाई
- डिवाइस की चौड़ाई और ऊंचाई
- अभिविन्यास (टैबलेट/फोन लैंडस्केप या पोर्ट्रेट मोड में है?)
- संकल्प
डेस्कटॉप, लैपटॉप, टैबलेट और मोबाइल फोन (जैसे आईफोन और एंड्रॉइड फोन) के लिए एक अनुरूप स्टाइल शीट देने के लिए मीडिया प्रश्नों का उपयोग करना एक लोकप्रिय तकनीक है।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो @mediaनियम का पूर्ण समर्थन करता है।
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
मीडिया क्वेरी सिंटैक्स
एक मीडिया क्वेरी में एक मीडिया प्रकार होता है और इसमें एक या अधिक एक्सप्रेशन हो सकते हैं, जो सही या गलत का समाधान करते हैं।
@media not|only mediatype and (expressions) {
CSS-Code;
}
क्वेरी का परिणाम सत्य है यदि निर्दिष्ट मीडिया प्रकार उस डिवाइस के प्रकार से मेल खाता है जिस पर दस्तावेज़ प्रदर्शित किया जा रहा है और मीडिया क्वेरी में सभी अभिव्यक्तियाँ सत्य हैं। जब कोई मीडिया क्वेरी सही होती है, तो सामान्य कैस्केडिंग नियमों का पालन करते हुए, संबंधित स्टाइल शीट या स्टाइल नियम लागू होते हैं।
जब तक आप न केवल या केवल ऑपरेटरों का उपयोग नहीं करते हैं, मीडिया प्रकार वैकल्पिक है और
allप्रकार निहित होगा।
आपके पास अलग-अलग मीडिया के लिए अलग-अलग स्टाइलशीट भी हो सकते हैं:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
CSS3 मीडिया प्रकार
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
मीडिया प्रश्न सरल उदाहरण
मीडिया प्रश्नों का उपयोग करने का एक तरीका यह है कि आपकी स्टाइल शीट के ठीक अंदर एक वैकल्पिक सीएसएस अनुभाग हो।
यदि व्यूपोर्ट 480 पिक्सेल चौड़ा या चौड़ा है (यदि व्यूपोर्ट 480 पिक्सेल से कम है, तो पृष्ठभूमि-रंग गुलाबी होगा) निम्न उदाहरण पृष्ठभूमि-रंग को हल्के हरे रंग में बदल देता है:
उदाहरण
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
निम्न उदाहरण एक मेनू दिखाता है जो पृष्ठ के बाईं ओर तैरता है यदि व्यूपोर्ट 480 पिक्सेल चौड़ा या चौड़ा है (यदि व्यूपोर्ट 480 पिक्सेल से कम है, तो मेनू सामग्री के शीर्ष पर होगा):
उदाहरण
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
अधिक मीडिया क्वेरी उदाहरण
मीडिया प्रश्नों पर और अधिक उदाहरणों के लिए, अगले पृष्ठ पर जाएँ: CSS MQ उदाहरण ।
सीएसएस @मीडिया संदर्भ
सभी मीडिया प्रकारों और विशेषताओं/अभिव्यक्तियों के पूर्ण अवलोकन के लिए, कृपया हमारे सीएसएस संदर्भ में @मीडिया नियम देखें ।