CSS मीडिया क्वेरी

CSS2 में मीडिया टाइप शामिल किया गया

CSS2 में शामिल किया गया @media नियम, जो विभिन्न मीडिया टाइपों के लिए विभिन्न शैली नियमों को परिभाषित करने में सक्षम करता है।

उदाहरण में: आपके पास कंप्यूटर स्क्रीन के लिए शैली नियमों का एक समूह हो सकता है, एक प्रिंटर के लिए, हैंडहेल डिवाइस के लिए, और यहां तक कि टेलीविजन के लिए, इत्यादि।

दुर्भाग्य से, छापने के मीडिया प्रकार के अलावा, ये मीडिया प्रकार कभी भी डिवाइसों द्वारा बड़े पैमाने पर समर्थित नहीं हुए।

CSS3 में मीडिया क्वेरी शुरू की

CSS3 में मीडिया क्वेरी ने CSS2 मीडिया प्रकार की संकल्पना को विस्तारित किया: वे डिवाइस के प्रकार को नहीं खोजते, बल्कि डिवाइस की क्षमता पर ध्यान केंद्रित करते हैं。

मीडिया क्वेरी का उपयोग कई चीज़ों की जाँच के लिए किया जा सकता है, जैसे:

  • विन्यास की चौड़ाई और ऊंचाई
  • डिवाइस का चौड़ाई और ऊंचाई
  • दिशा (टैबलेट/मोबाइल आड़ा या लंबा होने का है)
  • रेज़ोल्यूशन

मीडिया क्वेरी का उपयोग करना एक लोकप्रिय तकनीक है, जो डेस्कटॉप, लैपटॉप, टैबलेट और मोबाइल (जैसे iPhone और Android मोबाइल) के लिए अनुकूलित शैली पट्टी प्रदान करता है。

ब्राउज़र समर्थन

गोटा में दिखाया गया नंबर के अनुसार पूरी तरह से समर्थन @media पहले ब्राउज़र का संस्करण

गुण
@media 21.0 9.0 3.5 4.0 9.0

ग्रामातिका

मीडिया क्वेरी एक मीडिया प्रकार से बनी है और एक या अधिक एक्सप्रेशन को शामिल कर सकती है, जो खरा या गला हो सकता है。

@media not|only mediatype and (expressions) {
  CSS-कोड;
}

यदि निर्दिष्ट मीडिया प्रकार वर्तमान में प्रदर्शित दस्तावेज़ के डिवाइस के प्रकार से मेल खाता है और मीडिया क्वेरी में सभी एक्सप्रेशन खरा है, तो क्वेरी का परिणाम खरा होगा।जब मीडिया क्वेरी खरा होता है, तो उसके संबंधित शैली पट्टी या शैली नियमों को लागू किया जाता है और सामान्य कोशिश के अनुसार कार्य करता है。

अगर आप not या only ऑपरेटर का उपयोग नहीं करते, तो मीडिया प्रकार वैकल्पिक है और अभी से छुपा हुआ है all किस्म

आप भी अलग-अलग मीडिया के लिए अलग-अलग शैली पट्टी का उपयोग कर सकते हैं:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 मीडिया प्रकार

मूल्य वर्णन
all सभी मीडिया प्रकार के डिवाइस के लिए
print प्रिंटर के लिए
screen कंप्यूटर स्क्रीन, टैबलेट, स्मार्टफोन आदि के लिए
speech स्क्रीन रीडर के लिए बड़े आवाज से पृष्ठ को 'दुबारा' पढ़ने के लिए

मीडिया क्वेरी का एक सरल उदाहरण

मीडिया क्वेरी का एक तरीका है कि शैली पट्टी में एक अनुप्रयुक्त की शैली हो।

इस उदाहरण में, विन्यास की चौड़ाई 480 पिक्सल या इससे बड़ी होने पर पृष्ठ के पृष्ठभूमि रंग को हल्का हरी रंग में बदला गया है (यदि विन्यास की चौड़ाई 480 पिक्सल से कम है, तो पृष्ठभूमि रंग गुलाबी होगा):

उदाहरण

@media screen and (मिन-विद्धि: 480पिक्सल) {}}
  body {
    background-color: lightgreen;
  }
}

स्वयं को प्रयोग करें

इस उदाहरण में, एक मेन्यू को दिखाया गया है, यदि विन्यास की चौड़ाई 480 पिक्सल या इससे बड़ी है, तो यह मेन्यू पृष्ठ के बाएं हिस्से में फ्लोटिंग होगा (यदि विन्यास की चौड़ाई 480 पिक्सल से कम है, तो यह मेन्यू सामग्री के शीर्ष पर स्थित होगा):

उदाहरण

@media screen and (मिन-विद्धि: 480पिक्सल) {}}
  #leftsidebar {चौड़ाई: 200पिक्सल; फ्लॉट: बाएं;}
  #main {मार्ग-बाएं: 216पिक्सल;}
}

स्वयं को प्रयोग करें

अधिक मीडिया क्वेरी इंस्टेंस

अधिक मीडिया क्वेरी के इंस्टेंस के लिए अगला पृष्ठ की यात्रा करें:CSS MQ इंस्टेंस.

CSS @media रेफरेंस मैनुअल

सभी मीडिया टाइप और विशेषताओं/एक्सप्रेशन्स के पूर्ण वर्णन के लिए हमारे CSS रेफरेंस में @media रूल.