जवाबों:
दो (या अधिक) विभिन्न नियमों को निर्दिष्ट करने के लिए अल्पविराम का उपयोग करें:
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}से https://developer.mozilla.org/en/CSS/Media_queries/
... इसके अलावा, आप कई मीडिया क्वेरी को कॉमा से अलग की गई सूची में जोड़ सकते हैं; यदि सूची में कोई भी मीडिया क्वेरी सही है, तो संबंधित शैली पत्रक लागू किया जाता है। यह एक तार्किक "या" ऑपरेशन के बराबर है।
जल्दी जवाब।
अल्पविराम से अलग नियम:
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
लंबा जवाब।
यहां बहुत कुछ है, लेकिन मैंने इसे केवल लिखने के लिए नहीं, बल्कि इसे सघन बनाने की कोशिश की है। यह खुद को सीखने का अच्छा मौका है! हालांकि व्यवस्थित रूप से पढ़ने के लिए समय निकालें और मुझे आशा है कि यह मददगार होगा।
मीडिया प्रश्न अनिवार्य रूप से डिवाइस या स्थिति-विशिष्ट ब्राउज़िंग अनुभव बनाने के लिए वेब डिज़ाइन में उपयोग किए जाते हैं; यह @mediaपृष्ठ के सीएसएस के भीतर घोषणा का उपयोग करके किया जाता है । इसका उपयोग बड़ी संख्या में परिस्थितियों में एक वेबपेज को अलग-अलग तरीके से प्रदर्शित करने के लिए किया जा सकता है: चाहे आप टैबलेट या टीवी पर अलग-अलग पहलू अनुपात के साथ हों, चाहे आपके डिवाइस में एक रंग या काली-और-सफेद स्क्रीन हो, या, शायद सबसे अधिक बार, जब उपयोगकर्ता अपने ब्राउज़र का आकार बदलता है या अलग-अलग स्क्रीन आकार वाले ब्राउज़िंग उपकरणों के बीच स्विच करता है (बहुत ही सामान्य रूप से बोलना, इस तरह डिजाइन करना उत्तरदायी वेब डिज़ाइन के रूप में जाना जाता है )
इन स्थितियों के लिए डिजाइनिंग में, चार लॉजिकल ऑपरेटर दिखाई देते हैं जिनका उपयोग विभिन्न प्रकार के उपकरणों या व्यूपोर्ट आकारों को लक्षित करते समय आवश्यकताओं के अधिक जटिल संयोजनों की आवश्यकता के लिए किया जा सकता है ।
(नोट: यदि आप मीडिया नियम, मीडिया क्वेरी और फीचर क्वेरी के बीच के अंतर को नहीं समझते हैं, तो मीडिया क्वेरी सिंटैक्स से जुड़ी शब्दावली से थोड़ा बेहतर परिचित होने के लिए पहले इस उत्तर के निचले भाग को ब्राउज़ करें।
1. और और कीवर्ड)
यह आवश्यक है कि स्टाइल नियम लागू होने से पहले निर्दिष्ट सभी शर्तों को पूरा किया जाना चाहिए ।
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
निर्दिष्ट स्टाइल नियम तब तक लागू नहीं होंगे, जब तक कि निम्नलिखित सभी सत्य के रूप में मूल्यांकन न करें:
नोट: मेरा मानना है कि एक साथ उपयोग किए जाने वाले, ये तीन फ़ीचर क्वेरी एक ही मीडिया क्वेरी बनाते हैं ।
2. या ( कोमा से अलग सूची )
एक या कीवर्ड के बजाय , कॉम्प्लेक्स-अलग-अलग सूचियों का उपयोग एक से अधिक जटिल मीडिया नियम बनाने के लिए कई मीडिया क्वेरीज़ को एक साथ करने में किया जाता है
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
किसी एक मीडिया क्वेरी के सही होने पर निर्दिष्ट स्टाइलिंग नियम लागू हो जाएंगे :
3. नहीं ( कीवर्ड नहीं )
नहीं कीवर्ड किया जा सकता है एक भी नकारना के लिए इस्तेमाल किया मीडिया क्वेरी (और नहीं एक पूर्ण मीडिया शासन --meaning है कि यह केवल के लिए अल्पविराम का एक सेट और नहीं पूरा मीडिया @media घोषणा के बाद शासन के बीच प्रविष्टियों को नकारता)।
इसी तरह, ध्यान दें कि कीवर्ड मीडिया प्रश्नों को नकारता नहीं है , इसका उपयोग किसी मीडिया क्वेरी के भीतर एक व्यक्तिगत सुविधा क्वेरी को नकारने के लिए नहीं किया जा सकता है। *
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
यहाँ निर्दिष्ट स्टाइल प्रभावी होगा अगर
दूसरे शब्दों में, यदि मीडिया का प्रकार 'स्क्रीन' है और न्यूनतम रिज़ॉल्यूशन 300 डीपीआई है, तो नियम तब तक लागू नहीं होगा जब तक कि व्यूपोर्ट की न्यूनतम चौड़ाई 800 पिक्सेल न हो।
(कीवर्ड राज्य करने के लिए थोड़ा कायरतापूर्ण हो सकता है। मुझे बताएं कि क्या मैं बेहतर कर सकता हूं;)
4. केवल ( केवल कीवर्ड)
मैं यह समझ के रूप में, केवल कीवर्ड है नए मीडिया के प्रश्नों की गलत व्याख्या से पुराने ब्राउज़र को रोकने के लिए प्रयोग किया जाता है पहले से इस्तेमाल किया, संकरा मीडिया प्रकार के रूप में। जब सही तरीके से उपयोग किया जाता है, तो पुराने / गैर-अनुरूप ब्राउज़रों को केवल स्टाइल को पूरी तरह से अनदेखा करना चाहिए।
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
एक पुराना / गैर-अनुरूप ब्राउज़र केवल कोड की इस पंक्ति को पूरी तरह से अनदेखा कर देगा, मेरा मानना है कि यह एकमात्र कीवर्ड को पढ़ेगा और इसे एक गलत मीडिया प्रकार पर विचार करेगा । ( अधिक लोगों से अधिक जानकारी के लिए यहां और यहां देखें )
अधिक जानकारी के लिए
अधिक जानकारी के लिए (और अधिक विशेषताओं सहित, जिन्हें उद्धृत किया जा सकता है), देखें: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators
नोट: मुझे यह समझने के लिए कि सब कुछ के लिए निम्नलिखित शब्दावली सीखने की ज़रूरत है, विशेष रूप से कीवर्ड के बारे में नहीं । यहाँ यह है जैसा कि मैं इसे समझता हूँ:
एक मीडिया नियम (MDN भी इन मीडिया स्टेटमेंट को कॉल करता है) इसमें @mediaसभी आगामी मीडिया प्रश्नों के साथ शब्द शामिल है
@media all and (min-width: 800px)
@media only screen and (max-resolution:800dpi), not print
@media screen and (min-width: 700px), (orientation: landscape)
@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)
एक मीडिया क्वेरी सुविधा क्वेरी का एक सेट है। वे एक फीचर क्वेरी के रूप में सरल हो सकते हैं या वे और कीवर्ड का उपयोग करके अधिक जटिल क्वेरी बना सकते हैं। मीडिया के प्रश्नों को और जटिल मीडिया नियम ( ऊपर या कीवर्ड देखें ) बनाने के लिए अल्पविराम से अलग किया जा सकता है ।
screen (नोट: यहां उपयोग में केवल एक सुविधा क्वेरी।)
only screen
only screen and (max-resolution:800dpi)
only tv and (device-aspect-ratio: 16/9) and (color)
नहीं है handheld, (min-width: 650px)। (अल्पविराम पर ध्यान दें: यहां दो मीडिया प्रश्न हैं।)
एक सुविधा क्वेरी मीडिया नियम का सबसे बुनियादी हिस्सा है और किसी दिए गए ब्राउज़िंग स्थिति में बस एक विशेषता और इसकी स्थिति की चिंता करता है।
screen
(min-width: 650px)
(orientation: landscape)
(device-aspect-ratio: 16/9)
कोड स्निपेट और इससे प्राप्त जानकारी:
मोज़िला योगदानकर्ताओं द्वारा सीएसएस मीडिया क्वेरी ( CC-BY-SA 2.5 के तहत लाइसेंस प्राप्त )। कुछ कोड नमूनों का इस्तेमाल मामूली बदलाव के साथ किया गया (उम्मीद है) स्पष्टीकरण की स्पष्टता को बढ़ाएगा।
Css में उचित मीडिया क्वेरी लिखने के दो तरीके हैं। यदि आप मीडिया क्वेरी को पहले बड़े डिवाइस पर लिख रहे हैं तो लिखने का सही तरीका होगा:
@media only screen
and (min-width : 415px){
/* Styles */
}
@media only screen
and (min-width : 769px){
/* Styles */
}
@media only screen
and (min-width : 992px){
/* Styles */
}लेकिन अगर आप पहले छोटे डिवाइस के लिए मीडिया क्वेश्चन लिख रहे हैं तो यह कुछ इस तरह होगा:
@media only screen
and (max-width : 991px){
/* Styles */
}
@media only screen
and (max-width : 768px){
/* Styles */
}
@media only screen
and (max-width : 414px){
/* Styles */
}