सीएसएस @मीडिया नियम
उदाहरण
जब ब्राउज़र विंडो 600px चौड़ी या कम हो, तो <body> एलीमेंट के बैकग्राउंड कलर को "लाइटब्लू" में बदलें:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
@media
विभिन्न मीडिया प्रकारों/उपकरणों के लिए विभिन्न शैलियों को लागू करने के लिए मीडिया प्रश्नों में नियम का उपयोग किया जाता है ।
मीडिया प्रश्नों का उपयोग कई चीजों की जांच के लिए किया जा सकता है, जैसे:
- व्यूपोर्ट की चौड़ाई और ऊंचाई
- डिवाइस की चौड़ाई और ऊंचाई
- अभिविन्यास (टैबलेट/फोन लैंडस्केप या पोर्ट्रेट मोड में है?)
- संकल्प
डेस्कटॉप, लैपटॉप, टैबलेट और मोबाइल फोन पर एक अनुरूप स्टाइल शीट (उत्तरदायी वेब डिज़ाइन) देने के लिए मीडिया प्रश्नों का उपयोग करना एक लोकप्रिय तकनीक है।
आप मीडिया प्रश्नों का उपयोग यह निर्दिष्ट करने के लिए भी कर सकते हैं कि कुछ शैलियाँ केवल मुद्रित दस्तावेज़ों के लिए या स्क्रीन रीडर्स के लिए हैं (मीडियाटाइप: प्रिंट, स्क्रीन, या भाषण)।
मीडिया प्रकारों के अलावा, मीडिया विशेषताएं भी हैं। मीडिया सुविधाएं उपयोगकर्ता एजेंट या डिस्प्ले डिवाइस की विशिष्ट सुविधा के परीक्षण की अनुमति देकर मीडिया प्रश्नों को अधिक विशिष्ट विवरण प्रदान करती हैं। उदाहरण के लिए, आप केवल उन स्क्रीन पर शैलियाँ लागू कर सकते हैं जो एक निश्चित चौड़ाई से बड़ी या छोटी हैं।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो @media नियम का पूर्ण समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
सीएसएस सिंटेक्स
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
नॉट , ओनली और और कीवर्ड का अर्थ :
नहीं: नहीं कीवर्ड संपूर्ण मीडिया क्वेरी के अर्थ को उलट देता है।
केवल: एकमात्र कीवर्ड पुराने ब्राउज़र को रोकता है जो मीडिया सुविधाओं के साथ मीडिया क्वेरी का समर्थन नहीं करते हैं, निर्दिष्ट शैलियों को लागू करने से रोकते हैं। आधुनिक ब्राउज़रों पर इसका कोई प्रभाव नहीं पड़ता है।
और: और कीवर्ड मीडिया प्रकार या अन्य मीडिया सुविधाओं के साथ मीडिया सुविधा को जोड़ता है।
वे सभी वैकल्पिक हैं। हालांकि, यदि आप न केवल या केवल का उपयोग करते हैं, तो आपको एक मीडिया प्रकार भी निर्दिष्ट करना होगा।
आपके पास अलग-अलग मीडिया के लिए अलग-अलग स्टाइलशीट भी हो सकते हैं , जैसे:
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
मीडिया प्रकार
Value | Description |
---|---|
all | Default. 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 |
मीडिया सुविधाएँ
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
और ज्यादा उदाहरण
उदाहरण
जब ब्राउज़र की चौड़ाई 600px या उससे कम हो तो तत्व छिपाएँ:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
उदाहरण
यदि व्यूपोर्ट 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;
}
}
उदाहरण
एक प्रतिक्रियाशील नेविगेशन मेनू बनाएं (बड़ी स्क्रीन पर क्षैतिज रूप से और छोटी स्क्रीन पर लंबवत रूप से प्रदर्शित):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
उदाहरण
रिस्पॉन्सिव कॉलम लेआउट बनाने के लिए मीडिया क्वेरी का इस्तेमाल करें:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
उदाहरण
प्रतिक्रियाशील वेबसाइट बनाने के लिए मीडिया प्रश्नों का उपयोग करें:
उदाहरण
मीडिया प्रश्नों का उपयोग ब्राउज़र के उन्मुखीकरण के आधार पर पृष्ठ के लेआउट को बदलने के लिए भी किया जा सकता है। आपके पास सीएसएस गुणों का एक सेट हो सकता है जो केवल तभी लागू होगा जब ब्राउज़र विंडो इसकी ऊंचाई से अधिक चौड़ी हो, एक तथाकथित "लैंडस्केप" अभिविन्यास।
अगर ओरिएंटेशन लैंडस्केप मोड में है, तो हल्के नीले रंग के बैकग्राउंड रंग का इस्तेमाल करें:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
उदाहरण
स्क्रीन पर दस्तावेज़ प्रदर्शित होने पर टेक्स्ट का रंग हरा और प्रिंट होने पर काला करने के लिए मीडियाक्वेरीज़ का उपयोग करें:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
उदाहरण
कॉमा से अलग की गई सूची : कॉमा का उपयोग करके पहले से मौजूद मीडिया क्वेरी में एक अतिरिक्त मीडिया क्वेरी जोड़ें (यह एक OR ऑपरेटर की तरह व्यवहार करेगा):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <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;
}
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस मीडिया प्रश्न
सीएसएस ट्यूटोरियल: सीएसएस मीडिया प्रश्न उदाहरण
RWD ट्यूटोरियल: मीडिया प्रश्नों के साथ उत्तरदायी वेब डिज़ाइन
जावास्क्रिप्ट ट्यूटोरियल: विंडो.मैचमीडिया () विधि