सीएसएस मीडिया क्वेरी ओवरलैप के नियम क्या हैं?
कैस्केड।
@media नियम झरना लिए पारदर्शी होते हैं, इसलिए जब दो या अधिक @media नियम एक ही समय में मेल खाते हैं, ब्राउज़र सभी नियमों से मेल खाने वाले में शैलियों लागू करना चाहिए, और उसके अनुसार झरना हल।
क्या होगा, सभी का समर्थन ब्राउज़रों, वास्तव में 20em पर, और 45em भर में?
बिल्कुल 20em चौड़े पर, आपकी पहली और दूसरी मीडिया क्वेरी दोनों मेल खाएगी। ब्राउज़र @media दोनों नियमों और कैस्केड में शैलियों को लागू करेंगे, इसलिए यदि कोई विवादित नियम हैं जिन्हें ओवरराइड करने की आवश्यकता है, तो अंतिम घोषित एक जीतता है (विशिष्ट चयनकर्ताओं के लिए लेखांकन, !important, आदि)। इसी प्रकार दूसरी और तीसरी मीडिया क्वेरी के लिए जब व्यूपोर्ट बिल्कुल 45 मीटर चौड़ा होता है।
अपने उदाहरण कोड को देखते हुए, कुछ वास्तविक शैली के नियमों के साथ कहा:
@media (max-width: 20em) {
.sidebar { display: none; }
}
@media (min-width: 20em) and (max-width: 45em) {
.sidebar { display: block; float: left; }
}
जब ब्राउज़र व्यूपोर्ट बिल्कुल 20em व्यापक है, इन मीडिया के प्रश्नों के दोनों सच वापस आ जाएगी। कैस्केड द्वारा, display: block ओवरराइड display: none और float: left कक्षा .sidebar के साथ किसी भी तत्व पर लागू होगा।
आप नियमों को लागू करने के रूप में यह सोच सकते हैं के रूप में यदि मीडिया क्वेरी वहाँ के साथ शुरू नहीं थे:
.sidebar { display: none; }
.sidebar { display: block; float: left; }
जब एक ब्राउज़र दो या अधिक मीडिया क्वेरी से मेल खाता कैसे झरना जगह लेता है का एक और उदाहरण कर सकते हैं this other answer में पाया जाए।
चेतावनी दी जानी चाहिए कि अगर आपके पास @media नियमों में ओवरलैप नहीं है, तो उन सभी नियम लागू होंगे। @media नियमों में घोषणाओं की घोषणाओं में यूनियन का क्या होता है, न केवल बाद वाले व्यक्ति ने पूरी तरह से पूर्ववर्ती ...जो हमें अपने पहले प्रश्न के लिए लाता है:
हम कैसे मीडिया क्वेरी सही रूप में ओवरलैप से बचने के लिए बाहर अंतरिक्ष करते हैं?
आप ओवरलैप से बचना चाहते हैं, तो आप बस मीडिया क्वेरी कि परस्पर अनन्य हैं लिखने के लिए की जरूरत है।
याद रखें कि min- और max- उपसर्गों मतलब है "न्यूनतम समावेशी" और "अधिकतम समावेशी"; इसका मतलब है (min-width: 20em) और (max-width: 20em) दोनों एक व्यूपोर्ट से मेल खाते हैं जो बिल्कुल 20em चौड़ा है।
ऐसा लगता है कि आप पहले से ही एक उदाहरण है, जो हमें अपने पिछले प्रश्न के लाता है जैसे:
मैंने देखा है लोगों का उपयोग करें: 799px तरह बातें और फिर 800px, लेकिन क्या 799.5 पिक्सल के एक स्क्रीन की चौड़ाई के बारे में ? (स्पष्ट रूप से नियमित प्रदर्शन पर नहीं, बल्कि एक रेटिना एक?)
यह मुझे पूरी तरह से यकीन नहीं है; सीएसएस में सभी पिक्सेल मान तार्किक पिक्सल हैं, और मुझे एक ब्राउज़र खोजने के लिए कड़ी मेहनत की गई है जो व्यूपोर्ट चौड़ाई के लिए एक आंशिक पिक्सेल मान की रिपोर्ट करेगा। मैंने कुछ iframes के साथ प्रयोग करने की कोशिश की है लेकिन कुछ भी के साथ आने में सक्षम नहीं है।
अपने प्रयोगों से यह iOS पर सफारी प्रतीत होता है यह सुनिश्चित करें कि max-width: 799px दोनों में से किसी एक और min-width: 800px से मेल खाएगी सभी आंशिक पिक्सेल मान दौर है, भले ही व्यूपोर्ट वास्तव में 799.5px है (जो जाहिरा तौर पर पूर्व से मेल खाता है)।
हालांकि इस में से कोई भी स्पष्ट रूप में कहा गया है या तो Conditional Rules module या Cascade module (उत्तरार्द्ध जिनमें वर्तमान में एक फिर से लिखने के लिए उम्मीद है की), झरना सामान्य रूप से जगह लेने के लिए, कल्पना के बाद से निहित है बस ब्राउज़र या मीडिया से मेल खाने वाले नियमों में से किसी भी और सभी @media नियमों को लागू करने के लिए कहता है।
आपका वर्तमान प्रश्न शीर्षक जो आप पूछ रहे हैं उससे मेल नहीं खाता है। ऐसा लगता है कि आपकी प्रश्न सामग्री की पहली पंक्ति शीर्षक के रूप में बेहतर होगी :) – BoltClock
@ बोल्टक्लॉक, हमेशा के रूप में धन्यवाद - मैंने उन्हें चारों ओर बदल दिया; लेकिन आपने "मीडिया प्रश्नों को दूर करने" की व्याख्या कैसे की? – Baumr
अनुमान @media (...) कम या बराबर है, और अधिक या बराबर है। आप अधिकतम चौड़ाई –