CSS मीडिया प्रकार और क्वेरी उपयोगकर्ता को डिवाइस के सामान्य प्रकार (स्क्रीन, प्रिंट, आदि) या उसकी विशेषताओं (स्क्रीन रिज़ॉल्यूशन, व्यूपोर्ट आयाम, आदि) के अनुसार कुछ शैलियों को परिभाषित करने में मदद करते हैं।
सिंटैक्स
मीडिया प्रश्नों के लिए सिंटैक्स निम्नलिखित है -
@मीडिया नहीं | केवल मीडियाटाइप और (अभिव्यक्तियाँ) { CSS-Code;} यहां, मीडिया क्वेरी लागू की जाती है यदि -
- मीडियाटाइप उस डिवाइस प्रकार से मेल खाता है जिस पर दस्तावेज़ प्रस्तुत किया गया है।
- न केवल/केवल ऑपरेटरों को परिभाषित नहीं किया जाता है तो मीडिया क्वेरी सभी मीडियाटाइप पर लागू होती है।
- न केवल/केवल ऑपरेटरों को निर्दिष्ट किया जाता है तो मीडिया क्वेरी क्रमशः कुछ मीडियाटाइप पर लागू नहीं होती है।
एक उपयोगकर्ता के पास अलग-अलग मीडिया के अनुरूप अलग-अलग स्टाइलशीट हो सकते हैं। उदाहरण के लिए, एक उपयोगकर्ता के पास प्रिंट और स्क्रीन मीडिया के लिए एक अलग स्टाइलशीट हो सकती है।
और,
CSS3 में सूचीबद्ध मीडिया प्रकार निम्नलिखित हैं -
| Sr.No | मान और विवरण |
|---|---|
| 1 | सभी स्टाइलशीट सभी मीडिया प्रकार के उपकरणों पर लागू होती है |
| 2 | प्रिंट करें स्टाइलशीट प्रिंटर पर लागू होती है |
| 3 | स्क्रीन स्टाइलशीट कंप्यूटर स्क्रीन, टैबलेट, स्मार्ट फोन आदि पर लागू होती है। |
| 4 | भाषण स्टाइलशीट उन स्क्रीन पाठकों पर लागू होती है जो पृष्ठ को ज़ोर से "पढ़ते हैं" |
मीडिया पर निर्भर स्टाइलशीट बनाने की विधियाँ निम्नलिखित हैं -
- @media At-नियमों का उपयोग करना
- @import At-नियमों का उपयोग करना
- मीडिया विशेषता के साथ HTML <लिंक> तत्व का उपयोग करना
उदाहरण
आइए CSS मीडिया क्वेरी के लिए एक उदाहरण देखें -
आउटपुट
यह निम्नलिखित आउटपुट देगा -
जब स्क्रीन का आकार 850px से ऊपर हो -
जब स्क्रीन का आकार 550px और 850px के बीच हो -
जब स्क्रीन का आकार 550px से कम हो -
उदाहरण
आइए CSS मीडिया क्वेरी के लिए एक और उदाहरण देखें:HTML दस्तावेज़ -
<शरीर>विवामस कमोडो, डोलोर ईयू पोर्टिटर सैगिटिस, ओर्सी निस्ल कॉन्सेक्टेटूर इप्सम, वेल वॉलटपाट निभ लेक्टस एट एरेट। क्रैस स्केलेरिस्क फॉसीबस टेलस एलिकम कमोडो। डोनेक सेम उरना, इप्सम आईडी पर फैसिलिसिस, विवरा सॉलिसिटुडिन एस्ट। नाम रोंकस सॉलिसिटुडिन लोरेम, एक एक्यूमसन प्यूरस वेरियस एगेट।
अल्ट्राइसिस लेक्टस निसी में। नुल्ला वेरियस एक्स यूटी टॉर्चर कॉन्ग्यू विवरा। सेड सोडालेस व्हीकल लियो, विटे इंटरडम एलीट व्हीकल नेक। डोनेक टर्पिस ननंक, इयाकुलिस एट निसी सिट एमेट, फ्यूगिएट लैकिनिया मेटस।
सस्पेंडिस एगेट लिगुला एट रिसस लोबोर्टिस ऑर्नायर आईडी एट एलीट। सस्पेंडिस पोटेंशियल। विवामस पेलेंटेस्क एलीफेंड पेलेंटेस्क। वेस्टिबुलम नेक एंटे, iaculis a sagittis et, fermentum at metus.
सीएसएस दस्तावेज़ (स्क्रीन.सीएसएस):पी {रंग:नौसेना; फ़ॉन्ट-शैली:इटैलिक; }.दो {रंग:#c303c3; फ़ॉन्ट-आकार:20px; }शरीर {पृष्ठभूमि-रंग:हनीड्यू;}सीएसएस दस्तावेज़ (प्रिंट.सीएसएस):पी {रंग:लाल; फ़ॉन्ट-शैली:इटैलिक;}.दो {रंग:#989898; फ़ॉन्ट-आकार:40px; }आउटपुट
यह निम्नलिखित आउटपुट देगा -
जब दस्तावेज़ स्क्रीन मीडियाटाइप में दिखाई देता है -
जब दस्तावेज़ प्रिंट मीडियाटाइप में दिखाई देता है -
