CSS @media नियम
- पिछला पृष्ठ max-width
- अगला पृष्ठ min-block-size
वर्णन और उपयोग
@media नियम मीडिया क्वेरी में विभिन्न मीडिया टाइप/डिवाइस के लिए अलग-अलग स्टाइल लागू करने के लिए उपयोग किया जाता है।
मीडिया क्वेरी का उपयोग कई चीज़ों की जांच के लिए किया जा सकता है, जैसे कि:
- विन्डो की चौडाई और ऊंचाई
- डिवाइस का चौडाई और ऊंचाई
- दिशा (मोबाइल या टैबलेट किस तरह के मोड में है, अड़े से या ऊपर से?)
- रेज़ोल्यूशन
मीडिया क्वेरी का उपयोग करना एक लोकप्रिय तकनीक है, जो डेस्कटॉप, लैपटॉप, टैबलेट और मोबाइल फोन को रिस्पोंसिव वेब डिजाइन के लिए कस्टमाइज़ड स्टाइलशीट प्रदान करती है।
आप अधिकतर मीडिया क्वेरी का उपयोग करके कुछ स्टाइल केवल प्रिंट के लिए या स्क्रीन रीडर (मीडियाटाइप: प्रिंट, स्क्रीन या स्पीच) के लिए निर्धारित कर सकते हैं।
मीडिया तरीके के अलावा यहाँ अन्य मीडिया विशेषताएँ भी हैं। मीडिया विशेषताएँ उपयोगकर्ता एजेंट या दिखाने वाले उपकरण की विशिष्ट विशेषता की जांच की अनुमति देकर मीडिया क्वेरी को अधिक विशिष्ट विवरण प्रदान करती हैं। उदाहरण के लिए, आप सिर्फ विशिष्ट चौड़ाई के बड़े या छोटे स्क्रीन पर शैली को लागू कर सकते हैं।
दूसरे देखें:
CSS शिक्षा:CSS मीडिया क्वेरी
CSS शिक्षा:CSS मीडिया क्वेरी उदाहरण
RWD शिक्षा:मीडिया क्वेरी के माध्यम से प्रतिक्रियात्मक वेब डिजाइन को लागू करना
JavaScript संदर्भ दस्तावेज़:window.matchMedia() विधि
उदाहरण
उदाहरण 1
यदि ब्राउज़र विंडो की चौड़ाई 600px या कम होती है तो <body> एलिमेंट का पृष्ठभूमि रंग को 'हल्का नीला' कर दें
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
अधिक TIY उदाहरण एक और पृष्ठ के नीचे ढूंढ सकते हैं
CSS व्याकरण
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-कोड;
}
not, only और and चांदीवाहिनी का अर्थ:
not: not चांदीवाहिनी पूरे मीडिया क्वेरी के अर्थ को उलटती है
only: only चांदीवाहिनी से पुराने ब्राउज़र को निर्दिष्ट स्टाइल को लागू करने से रोकती है जो मीडिया विशेषता सहित की मीडिया क्वेरी को नहीं समर्थित करते हैं। यह आधुनिक ब्राउज़र पर कोई प्रभाव नहीं डालती
और: and चांदीवाहिनी को मीडिया विशेषता से मीडिया तरीका या अन्य मीडिया विशेषता के साथ जोड़ती है
वे सभी वैकल्पिक हैं। लेकिन not या only का इस्तेमाल करते है तो मीडिया तरीका को भी निर्दिष्ट करना चाहिए
आप अलग-अलग मीडिया के लिए अलग-अलग स्टाइलशीट का इस्तेमाल कर सकते हैं, जैसे यहाँ दिया गया है:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css"> ....
मीडिया तरीका
| मूल्य | वर्णन |
|---|---|
| ऑल | डिफ़ॉल्ट। सभी मीडिया तरीके के लिए इस्तेमाल किया जाता है |
| प्रिंट | प्रिंटर के लिए |
| स्क्रीन | कंप्यूटर स्क्रीन, टैबलेट, स्मार्टफोन आदि के लिए |
| स्पीच | पृष्ठ को पढ़ने के लिए इस्तेमाल करने वाले स्क्रीन रीडर |
मीडिया विशेषता
| मूल्य | वर्णन |
|---|---|
| एनी-हॉवर |
कोई उपयोगी इनपुट संस्थान है जो उपयोगकर्ता (माउस आदि) को एलिमेंट पर स्थित करने की अनुमति देता है? Media Queries Level 4 में जोड़ा गया। |
| एनी-पॉइंटर |
कोई संकेतक उपकरण है या नहीं, अगर है तो इसकी निखार तथ्य क्या है? Media Queries Level 4 में जोड़ा गया। |
| एस्पेक्ट-रेशियो | |
|
aspect-ratio व्यूपोर्ट (viewport) का चौड़ाई और ऊंचाई का अनुपात |
|
| color |
यदि डिवाइस रंग को आउटपुट नहीं करता है, तो इसका मान 0 है Media Queries Level 4 में जोड़ा गया। |
| color-gamut |
उपयोगकर्ता एजेंट और आउटपुट डिवाइस द्वारा लगभग समर्थित रंग क्षेत्र color-index |
| यदि डिवाइस को रंग की खोज तालिका का उपयोग नहीं करता है, तो इसका मान 0 है |
device-aspect-ratio Media Queries Level 4 में छोड़ दिया गया है |
| आउटपुट डिवाइस का चौड़ाई और ऊंचाई का अनुपात |
device-height Media Queries Level 4 में छोड़ दिया गया है |
| आउटपुट डिवाइस रेंडरिंग सर्फेस (जैसे स्क्रीन) की ऊंचाई |
आउटपुट डिवाइस रेंडरिंग सर्फेस (जैसे स्क्रीन) की चौड़ाई Media Queries Level 4 में छोड़ दिया गया है |
| display-mode |
अनुप्रयोग का प्रदर्शन पैटर्न, जैसा कि Web App के manifest के display सदस्य द्वारा निर्दिष्ट Web App Manifest spec में परिभाषित |
| forced-colors |
उपयोगकर्ता एजेंट को पैलेट को नियंत्रित करने के लिए निर्बाध कर रहा है कि नहीं Media Queries Level 5 में जोड़ा गया। |
| grid | आउटपुट डिवाइस ग्रिड स्क्रीन या पॉइंट लैस स्क्रीन का उपयोग करता है |
| height | व्यूपोर्ट (viewport) की ऊंचाई |
| hover |
मुख्य इनपुट तंत्र को उपयोगकर्ता को एलिमेंट पर माउस को हवेर करने की अनुमति देता है कि नहीं Media Queries Level 4 में जोड़ा गया। |
| inverted-colors |
ब्राउज़र या बुनियादी ऑपरेटिंग सिस्टम रंग को उल्टा कर रहे हैं कि नहीं Media Queries Level 5 में जोड़ा गया। |
| light-level |
वर्तमान पर्यावरण प्रकाश स्तर Media Queries Level 5 में जोड़ा गया। |
| max-aspect-ratio | दिखाने वाले क्षेत्र की चौड़ाई और ऊंचाई के बीच का अधिकतम अनुपात |
| max-color | आउटपुट डिवाइस प्रति रंग के संयोजक के लिए अधिकतम बिट की गणना |
| max-color-index | डिवाइस द्वारा दिखाया जा सकने वाला अधिकतम रंग की संख्या |
| max-height | दिखाने वाले क्षेत्र की अधिकतम ऊंचाई, उदाहरण के लिए ब्राउज़र विंडो |
| max-monochrome | एकल रंग (ग्रे स्केल) डिवाइस पर हर |
| max-resolution | डिवाइस की अधिकतम रेजोल्यूशन, dpi या dpcm के रूप में इस्तेमाल किया जाता है |
| max-width | दिखाने वाले क्षेत्र की अधिकतम चौड़ाई, उदाहरण के लिए ब्राउज़र विंडो |
| min-aspect-ratio | दिखाने वाले क्षेत्र की चौड़ाई और ऊंचाई के बीच की न्यूनतम अनुपात |
| min-color | आउटपुट डिवाइस प्रति रंग के संयोजक के लिए न्यूनतम बिट की गणना |
| min-color-index | डिवाइस द्वारा दिखाया जा सकने वाला न्यूनतम रंग की संख्या |
| min-height | दिखाने वाले क्षेत्र की न्यूनतम ऊंचाई, उदाहरण के लिए ब्राउज़र विंडो |
| min-monochrome | एकल रंग (ग्रे स्केल) डिवाइस पर हर |
| min-resolution | डिवाइस की न्यूनतम रेजोल्यूशन, dpi या dpcm के रूप में उपयोग किया जाता है |
| min-width | दिखाने वाले क्षेत्र की न्यूनतम चौड़ाई, जैसे ब्राउज़र विंडो |
| monochrome |
आउटपुट डिवाइस के सिंगल श्याम फ्रेम बफ़र में प्रति पिक्सल का बिट गहराई यदि डिवाइस सफेद-श्याम पटरी नहीं है, तो इसका मान 0 है |
| orientation | विन्यास (viewport) का घुमाव (विस्तृत मोड के रूप में या उभार जाने के मोड के रूप में) |
| overflow-block |
आउटपुट डिवाइस ने ब्लॉक अक्ष पर ओवरफ्लो विन्यास (viewport) की सामग्री को कैसे संभाला है Media Queries Level 4 में जोड़ा गया। |
| overflow-inline |
इनलाइन अक्ष पर ओवरफ्लो विन्यास (viewport) की सामग्री को स्क्रॉल किया जा सकता है Media Queries Level 4 में जोड़ा गया। |
| pointer |
मुख्य इनपुट उपकरण एक पॉइंटर डिवाइस है क्या? अगर हाँ, तो इसकी निखारण कैसी है? Media Queries Level 4 में जोड़ा गया। |
| prefers-color-scheme |
उपयोगकर्ता उज्ज्वल या अंधेरे रंग स्कीम को पसंद करता है Media Queries Level 5 में जोड़ा गया। |
| prefers-contrast |
उपयोगकर्ता ने रंगों के बीच की तीव्रता को बढ़ाना या कम करना चाहता है Media Queries Level 5 में जोड़ा गया। |
| prefers-reduced-motion |
उपयोगकर्ता ने पृष्ठ पर अधिक गतिशील प्रभाव देखना नहीं चाहता Media Queries Level 5 में जोड़ा गया। |
| prefers-reduced-transparency |
उपयोगकर्ता नीचे की दर्जे के पारदर्शिता को पसंद करता है Media Queries Level 5 में जोड़ा गया। |
| resolution | आउटपुट डिवाइस का रेजोल्यूशन, dpi या dpcm के रूप में उपयोग किया जाता है |
| scan | आउटपुट डिवाइस के स्कैनिंग प्रक्रिया (टेलीविजन आदि के लिए) |
| scripting |
स्क्रिप्ट (जैसे JavaScript) के उपयोग की जाँच करें Media Queries Level 5 में जोड़ा गया। |
| update |
आउटपुट डिवाइस द्वारा सामग्री के रेंडरिंग परिणाम को अद्यतन करने की तारीख Media Queries Level 4 में जोड़ा गया। |
| width | विन्यास (viewport) की चौड़ाई。 |
और अधिक उदाहरण
उदाहरण 2
जब ब्राउज़र की चौड़ाई 600px या कम है, तो एलिमेंट को छुपाएं:
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
उदाहरण 3
यदि विन्यास की चौड़ाई 800 पिक्सल या अधिक है, तो पृष्ठभूमि रंग को फैशन रंग में सेट करें; यदि विन्यास की चौड़ाई 400 से 799 पिक्सल के बीच है, तो पृष्ठभूमि रंग को हल्का हरा रंग में सेट करें। यदि विन्यास की चौड़ाई 400 पिक्सल से कम है, तो पृष्ठभूमि रंग हल्का नीला होगा:
body {
background-color: lightblue;
}
@media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
उदाहरण 4
एक रिस्पोंसिव नेविगेशन मेनू बनाएं (बड़े स्क्रीन पर लवलिंग और छोटे स्क्रीन पर खड़ा दिखाएं):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
उदाहरण 5
मीडिया क्वेरी का उपयोग करके रिस्पोंसिव स्तम्भ रूपांतरण बनाएं:
/* 992px या कम चौड़ाई वाले स्क्रीन पर, चार स्तम्भ से दो स्तम्भ में बदलें */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* जब चौड़ाई 600 पिक्सल या कम हो तो - सभी स्तम्भ को स्टैक करें, न कि पारस्परिक रूप से प्रदर्शित करें */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
उदाहरण 6
मीडिया क्वेरी का उपयोग करके रिस्पोंसिव वेबसाइट बनाएं:
उदाहरण 7
मीडिया क्वेरी को ब्राउज़र की दिशा के अनुसार पृष्ठ के रूपांतरण के लिए भी उपयोग किया जा सकता है। आप कुछ CSS गुणों का समूह लिख सकते हैं जो केवल ब्राउज़र विंडो की चौड़ाई उच्चाई से बड़ी होने पर ही लागू होते हैं (अर्थात 'ऊपरी-चौड़ी' दिशा):
यदि दिशा पूर्व-ऊपरी रूप में हो तो - शामक रंग को हल्के नीले का रंग बनाएं:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
उदाहरण 8
मीडिया क्वेरी का उपयोग करके दस्तावेज़ को स्क्रीन पर प्रदर्शित करते समय हरे रंग को और मुद्रण के समय काले रंग को निर्धारित करें:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
उदाहरण 9
कमा द्वारा अलगाई तालिका: कमा के द्वारा अलगाई तालिका को मौजूदा मीडिया क्वेरी में जोड़ें (यह OR गणना से मिलता-जुलता है):
/* जब चौड़ाई 600px और 900px के बीच हो या 1100px से अधिक हो तो - <div> के आकार को बदलें */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
ब्राउज़र समर्थन
तालिका में दिए गए नंबरों में @media नियमों के पूर्ण समर्थन वाले पहले ब्राउज़र संस्करण का संकेत दिया गया है。
| च्रोम | आईई / एड्ज | फ़ायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|
| 21 | 9 | 3.5 | 4.0 | 9 |
- पिछला पृष्ठ max-width
- अगला पृष्ठ min-block-size
