CSS
मीडिया के प्रश्नों

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
खोज…


वाक्य - विन्यास

  • @media [न केवल] मेडियाटाइप और (मीडिया सुविधा) {/ * CSS नियम * /} लागू करने के लिए

पैरामीटर

पैरामीटर विवरण
mediatype (वैकल्पिक) यह मीडिया का प्रकार है। all screen के रेंज में कुछ भी हो सकता है।
not (वैकल्पिक) इस विशेष मीडिया प्रकार के लिए सीएसएस लागू नहीं होता है और बाकी सब के लिए लागू होता है।
media feature सीएसएस के लिए उपयोग के मामले की पहचान करने के लिए तर्क। नीचे दिए गए विकल्प।
मीडिया फीचर विवरण
aspect-ratio आउटपुट डिवाइस के लक्षित प्रदर्शन क्षेत्र के पहलू अनुपात का वर्णन करता है।
color आउटपुट डिवाइस के रंग घटक प्रति बिट की संख्या को इंगित करता है। यदि डिवाइस रंगीन डिवाइस नहीं है, तो यह मान शून्य है।
color-index आउटपुट डिवाइस के लिए कलर लुक-अप तालिका में प्रविष्टियों की संख्या को इंगित करता है।
grid निर्धारित करता है कि आउटपुट डिवाइस एक ग्रिड डिवाइस या बिटमैप डिवाइस है।
height ऊंचाई मीडिया फीचर आउटपुट डिवाइस की रेंडरिंग सतह की ऊंचाई का वर्णन करता है।
max-width सीएसएस निर्दिष्ट की तुलना में व्यापक स्क्रीन चौड़ाई पर लागू नहीं होगा।
min-width सीएसएस निर्दिष्ट की तुलना में संकीर्ण स्क्रीन चौड़ाई पर लागू नहीं होगा।
max-height सीएसएस निर्दिष्ट से अधिक स्क्रीन ऊंचाई पर लागू नहीं होगा।
min-height सीएसएस निर्दिष्ट से कम स्क्रीन ऊंचाई पर लागू नहीं होगा।
monochrome एक मोनोक्रोम (greyscale) डिवाइस पर प्रति पिक्सेल बिट्स की संख्या को इंगित करता है।
orientation यदि डिवाइस निर्दिष्ट अभिविन्यास का उपयोग कर रहा है तो सीएसएस केवल प्रदर्शित करेगा। अधिक विवरण के लिए टिप्पणी देखें।
resolution आउटपुट डिवाइस के रिज़ॉल्यूशन (पिक्सेल घनत्व) को इंगित करता है।
scan टेलीविज़न आउटपुट डिवाइस की स्कैनिंग प्रक्रिया का वर्णन करता है।
width चौड़ाई मीडिया सुविधा आउटपुट डिवाइस की रेंडरिंग सतह की चौड़ाई (जैसे दस्तावेज़ विंडो की चौड़ाई, या प्रिंटर पर पृष्ठ बॉक्स की चौड़ाई) का वर्णन करती है।
पदावनत विशेषताएँ विवरण
device-aspect-ratio Deprecated सीएसएस केवल उन उपकरणों पर प्रदर्शित होगा जिनकी ऊंचाई / चौड़ाई अनुपात निर्दिष्ट अनुपात से मेल खाती है। यह एक deprecated सुविधा है और काम करने की गारंटी नहीं है।
max-device-width एक ही max-width रूप में Deprecated लेकिन भौतिक स्क्रीन चौड़ाई को मापता है, बजाय ब्राउज़र की प्रदर्शन चौड़ाई के।
min-device-width Deprecated के रूप में एक ही min-width लेकिन उपायों शारीरिक स्क्रीन की चौड़ाई के बजाय ब्राउज़र के प्रदर्शन चौड़ाई।
max-device-height एक ही max-height रूप में Deprecated लेकिन भौतिक स्क्रीन चौड़ाई को मापता है, बजाय ब्राउज़र की डिस्प्ले चौड़ाई के।
min-device-height समान min-height रूप में Deprecated लेकिन भौतिक स्क्रीन चौड़ाई को मापता है, बजाय ब्राउज़र की डिस्प्ले चौड़ाई के।

टिप्पणियों

क्रोम, फ़ायरफ़ॉक्स, ओपेरा, और इंटरनेट एक्सप्लोरर 9 और ऊपर सहित सभी आधुनिक ब्राउज़रों में मीडिया प्रश्नों का समर्थन किया जाता है।

यह ध्यान रखना महत्वपूर्ण है कि orientation मीडिया सुविधा मोबाइल उपकरणों तक सीमित नहीं है। यह व्यूपोर्ट की चौड़ाई और ऊंचाई पर आधारित है (विंडो या डिवाइस नहीं)।

लैंडस्केप मोड तब होता है जब व्यूपोर्ट की चौड़ाई व्यूपोर्ट ऊंचाई से बड़ी होती है।

पोर्ट्रेट मोड तब होता है जब व्यूपोर्ट की ऊंचाई व्यूपोर्ट की चौड़ाई से बड़ी होती है।

यह आमतौर पर एक डेस्कटॉप मॉनिटर के लैंडस्केप मोड में होने का अनुवाद करता है, लेकिन क्या यह कभी-कभी पोर्ट्रेट हो सकता है।

ज्यादातर मामलों में मोबाइल डिवाइस अपने रिज़ॉल्यूशन की रिपोर्ट करेंगे, न कि उनके वास्तविक पिक्सेल आकार की, जो पिक्सेल घनत्व के कारण भिन्न हो सकते हैं। अपने असली पिक्सेल आकार को रिपोर्ट करने के लिए उन्हें अपने head टैग के अंदर जोड़ने के लिए मजबूर करने के लिए:

<meta name="viewport" content="width=device-width, initial-scale=1">

मूल उदाहरण

@media screen and (min-width: 720px) {
    body {
        background-color: skyblue;
    }
}

उपरोक्त मीडिया क्वेरी दो शर्तें निर्दिष्ट करती है:

  1. पृष्ठ को एक सामान्य स्क्रीन (मुद्रित पृष्ठ, प्रोजेक्टर, आदि नहीं) पर देखा जाना चाहिए।
  2. उपयोगकर्ता के दृश्य पोर्ट की चौड़ाई कम से कम 720 पिक्सेल होनी चाहिए।

यदि ये स्थितियां पूरी हो जाती हैं, तो मीडिया क्वेरी के अंदर की शैलियाँ सक्रिय हो जाएंगी, और पृष्ठ की पृष्ठभूमि का रंग आसमानी नीला हो जाएगा।

मीडिया के प्रश्नों को गतिशील रूप से लागू किया जाता है। यदि पेज लोड होता है तो मीडिया क्वेरी में निर्दिष्ट शर्तों को पूरा किया जाता है, सीएसएस लागू किया जाएगा, लेकिन तुरंत अक्षम हो जाना चाहिए शर्तों को पूरा करना बंद कर देना चाहिए। इसके विपरीत, यदि शर्तों को शुरू में पूरा नहीं किया जाता है, तो सीएसएस लागू नहीं किया जाएगा जब तक कि निर्दिष्ट शर्तें पूरी नहीं होती हैं।

हमारे उदाहरण में, यदि उपयोगकर्ता की दृश्य पोर्ट चौड़ाई प्रारंभ में 720 पिक्सेल से अधिक है, लेकिन उपयोगकर्ता ब्राउज़र की चौड़ाई सिकुड़ता है, तो पृष्ठभूमि का रंग आसमानी नीला होना बंद हो जाएगा जैसे ही उपयोगकर्ता ने दृश्य पोर्ट को 720 पिक्सेल से कम में बदल दिया है चौड़ाई।

लिंक टैग पर उपयोग करें

<link rel="stylesheet" media="min-width: 600px" href="example.css" />

यह स्टाइलशीट अभी भी डाउनलोड की गई है, लेकिन केवल उन उपकरणों पर लागू होती है, जिनकी स्क्रीन चौड़ाई 600px से अधिक हो।

मीडिया का स्वरूप

मीडिया क्वेरीज़ में एक वैकल्पिक mediatype पैरामीटर है। इस पैरामीटर को सीधे @media घोषणा ( @media mediatype ) के बाद रखा जाता है, उदाहरण के लिए: 

@media print {
    html {
        background-color: white;
    }
}

ऊपर सीएसएस कोड डोम HTML तत्व को मुद्रित होने पर एक सफेद पृष्ठभूमि रंग देगा।

mediatype पैरामीटर में एक वैकल्पिक not या only उपसर्ग होता है जो क्रमशः मेडिएप्टाइप या केवल निर्दिष्ट मीडिया प्रकार को छोड़कर हर चीज पर शैलियों को लागू करेगा। उदाहरण के लिए, निम्न कोड उदाहरण print को छोड़कर प्रत्येक मीडिया प्रकार के लिए शैली लागू करेगा। 

@media not print {
    html {
        background-color: green;
    }
}

और इसी तरह, इसे केवल स्क्रीन पर दिखाने के लिए, इसका उपयोग किया जा सकता है: 

@media only screen {
    .fadeInEffects {
        display: block;
    }
}

निम्न तालिका के साथ mediatype की सूची को बेहतर तरीके से समझा जा सकता है:

मीडिया का स्वरूप विवरण
all सभी उपकरणों पर लागू करें
screen डिफ़ॉल्ट कंप्यूटर
print सामान्य तौर पर प्रिंटर। वेबसाइटों के प्रिंट-संस्करणों को स्टाइल करने के लिए उपयोग किया जाता है
handheld पीडीए, सेलफोन और छोटे स्क्रीन वाले हाथ से चलने वाले उपकरण
projection अनुमानित प्रस्तुति के लिए, उदाहरण के लिए प्रोजेक्टर
aural भाषण प्रणाली
braille ब्रेल स्पर्शक उपकरण
embossed पृष्ठांकित ब्रेल प्रिंटर
tv टेलीविज़न-प्रकार के उपकरण
tty एक निश्चित पिच वर्ण ग्रिड के साथ डिवाइस। टर्मिनल, पोर्टेबल्स।

विभिन्न स्क्रीन आकार को लक्षित करने के लिए मीडिया क्वेरी का उपयोग करना

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

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .site-title {
        font-size: 80%;
    }

    /* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .site-title {
        font-size: 90%;
    }

    /* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}

@media only screen and (min-width: 1024px) {
    .site-title {
        font-size: 120%;
    }

    /* Styles in this block are only applied if the screen size is over 1024px wide. */
}

चौड़ाई बनाम व्यूपोर्ट

जब हम मीडिया प्रश्नों के साथ "चौड़ाई" का उपयोग कर रहे हैं तो मेटा टैग को सही ढंग से सेट करना महत्वपूर्ण है। बेसिक मेटा टैग इस तरह दिखता है और इसे <head> टैग के अंदर रखना होगा। 

<meta name="viewport" content="width=device-width,initial-scale=1">

यह महत्वपूर्ण क्यों है?

एमडीएन की परिभाषा के आधार पर "चौड़ाई" है

चौड़ाई मीडिया सुविधा आउटपुट डिवाइस की रेंडरिंग सतह की चौड़ाई (जैसे दस्तावेज़ विंडो की चौड़ाई, या प्रिंटर पर पृष्ठ बॉक्स की चौड़ाई) का वर्णन करती है।

इसका क्या मतलब है?

व्यू-पोर्ट डिवाइस की चौड़ाई ही है। यदि आपका स्क्रीन रिज़ॉल्यूशन कहता है कि रिज़ॉल्यूशन 1280 x 720 है, तो आपका व्यू-पोर्ट चौड़ाई "1280px" है।

अधिक बार कई डिवाइस एक पिक्सेल को प्रदर्शित करने के लिए विभिन्न पिक्सेल राशि आवंटित करते हैं। उदाहरण के लिए iPhone 6 Plus में 1242 x 2208 रिज़ॉल्यूशन है। लेकिन वास्तविक व्यूपोर्ट-चौड़ाई और व्यूपोर्ट-ऊंचाई 414 x 736 है। इसका मतलब है कि 1 पिक्सेल बनाने के लिए 3 पिक्सेल का उपयोग किया जाता है।

लेकिन अगर आपने meta टैग को सही तरीके से सेट नहीं किया है तो यह आपके वेबपेज को उसके मूल रिज़ॉल्यूशन के साथ दिखाने की कोशिश करेगा जिसके परिणामस्वरूप ज़ूम आउट व्यू (छोटे पाठ और चित्र) होंगे।

रेटिना और गैर रेटिना स्क्रीन के लिए मीडिया क्वेरी

हालाँकि यह केवल WebKit आधारित ब्राउज़र के लिए काम करता है, यह मददगार है: 

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

पृष्ठभूमि की जानकारी

डिस्प्ले में दो तरह के पिक्सल होते हैं। एक तार्किक पिक्सेल है और दूसरा भौतिक पिक्सेल है। अधिकतर, भौतिक पिक्सेल हमेशा समान रहते हैं, क्योंकि यह सभी प्रदर्शन उपकरणों के लिए समान है। उच्च गुणवत्ता वाले पिक्सेल को प्रदर्शित करने के लिए उपकरणों के संकल्प के आधार पर तार्किक पिक्सेल बदलते हैं। डिवाइस पिक्सेल अनुपात भौतिक पिक्सेल और तार्किक पिक्सेल के बीच का अनुपात है। उदाहरण के लिए, मैकबुक प्रो रेटिना, आईफोन 4 और इसके बाद के संस्करण की रिपोर्ट एक डिवाइस पिक्सेल अनुपात 2 है, क्योंकि भौतिक रैखिक संकल्प तार्किक संकल्प दोगुना है।

इसका कारण यह है कि केवल WebKit आधारित ब्राउज़रों के साथ काम करने का कारण यह है:

  • नियम से पहले वेंडर उपसर्ग -webkit- ।
  • यह WebKit और Blink के अलावा अन्य इंजनों में लागू नहीं किया गया है।

शब्दावली और संरचना

मीडिया प्रश्न एक को मीडिया प्रकार नामक डिवाइस / मीडिया (जैसे स्क्रीन, प्रिंट या हैंडहेल्ड) के प्रकार के आधार पर सीएसएस नियमों को लागू करने की अनुमति देते हैं, डिवाइस के अतिरिक्त पहलुओं को मीडिया सुविधाओं जैसे कि रंग या व्यूपोर्ट आयामों की उपलब्धता के साथ वर्णित किया गया है।

एक मीडिया क्वेरी की सामान्य संरचना 

@media [...] {
    /* One or more CSS rules to apply when the query is satisfied */
}

मीडिया प्रकार से युक्त मीडिया क्वेरी 

@media print {
    /* One or more CSS rules to apply when the query is satisfied */
}

एक मीडिया क्वेरी जिसमें एक मीडिया प्रकार और एक मीडिया फ़ीचर होता है 

@media screen and (max-width: 600px) {
    /* One or more CSS rules to apply when the query is satisfied */
}

मीडिया सुविधा युक्त मीडिया क्वेरी (और "सभी" का एक निहित मीडिया प्रकार) 

@media (orientation: portrait) {        
    /* One or more CSS rules to apply when the query is satisfied */
}

मीडिया प्रश्न और IE8

IE8 और उसके नीचे मीडिया के प्रश्नों का समर्थन नहीं किया जाता है।

एक जावास्क्रिप्ट आधारित वर्कअराउंड

IE8 के लिए समर्थन जोड़ने के लिए, आप कई जेएस समाधानों में से एक का उपयोग कर सकते हैं। उदाहरण के लिए, जवाब केवल निम्न कोड के साथ IE8 के लिए मीडिया क्वेरी समर्थन जोड़ने के लिए जोड़ा जा सकता है: 

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries एक अन्य लाइब्रेरी है जो समान कार्य करती है। अपने HTML में उस लाइब्रेरी को जोड़ने के लिए कोड समान होगा: 

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

वैकल्पिक

यदि आपको JS आधारित समाधान पसंद नहीं है, तो आपको IE <9 केवल स्टाइलशीट जोड़ने पर भी विचार करना चाहिए जहाँ आप अपनी स्टाइलिंग को IE <9 में समायोजित करते हैं। उसके लिए, आपको अपने कोड में निम्न HTML जोड़ना चाहिए: 

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

ध्यान दें :

तकनीकी रूप से यह एक और विकल्प है: IE <9 को लक्षित करने के लिए सीएसएस हैक का उपयोग करना। इसका प्रभाव IE <9 केवल स्टाइलशीट के समान है, लेकिन आपको इसके लिए अलग स्टाइलशीट की आवश्यकता नहीं है। मैं इस विकल्प की अनुशंसा नहीं करता, हालांकि, जैसा कि वे अमान्य सीएसएस कोड का उत्पादन करते हैं (जो कि कई कारणों में से एक है, क्योंकि सीएसएस हैक का उपयोग आम तौर पर आज के समय में डूब जाता है)।



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow