CSS मीडिया क्वेरी ओवरलैप के नियम क्या हैं?
कास्केड।
@mediaनियम कैस्केड के लिए पारदर्शी हैं, इसलिए जब दो या अधिक @mediaनियम एक ही समय में मेल खाते हैं, तो ब्राउज़र को उन सभी नियमों में शैलियों को लागू करना चाहिए जो मैच करते हैं, और तदनुसार कैस्केड को हल करते हैं। 1
क्या सभी सहायक ब्राउज़रों में, बिल्कुल 20em और 45em पर होगा?
बिल्कुल 20 मी चौड़े पर, आपकी पहली और दूसरी मीडिया क्वेरी दोनों मेल खाएगी। ब्राउज़र @mediaनियम और कैस्केड दोनों के अनुसार शैली लागू करेंगे , इसलिए यदि कोई परस्पर विरोधी नियम हैं जिन्हें ओवरराइड करने की आवश्यकता है, तो अंतिम-घोषित एक जीत (विशिष्ट चयनकर्ताओं !important, आदि के लिए लेखांकन )। इसी तरह दूसरी और तीसरी मीडिया क्वेरी के लिए जब व्यूपोर्ट बिल्कुल 45em चौड़ा हो।
कुछ वास्तविक शैली नियमों के साथ, अपने उदाहरण कोड को ध्यान में रखते हुए:
@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; }
जब एक ब्राउज़र दो या अधिक मीडिया प्रश्नों से मेल खाता है तो कैस्केड कैसे होता है, इसका एक और उदाहरण इस अन्य उत्तर में पाया जा सकता है ।
हालांकि, चेतावनी दी जाती है कि यदि आपके पास ऐसी घोषणाएं हैं जो दोनों नियमों में ओवरलैप नहीं हैं @media, तो वे सभी नियम लागू होंगे। यहां क्या होता है दोनों नियमों में घोषणाओं का एक संघ@media है, न कि बाद वाला पूरी तरह से पूर्व को पूरी तरह से खारिज कर देता है ... जो हमें आपके पहले के दिनों में लाता है:
ओवरलैप से बचने के लिए हम मीडिया के प्रश्नों को कैसे सही ढंग से रखते हैं?
यदि आप ओवरलैप से बचना चाहते हैं, तो आपको बस मीडिया क्वेश्चन लिखने की जरूरत है जो पारस्परिक रूप से अनन्य हैं।
याद रखें कि min-और max-उपसर्गों का अर्थ है "न्यूनतम समावेशी" और "अधिकतम समावेशी"; इसका मतलब है (min-width: 20em)और (max-width: 20em)दोनों एक व्यूपोर्ट से मेल खाएंगे जो कि बिल्कुल 20 मीटर चौड़ा है।
ऐसा लगता है कि आपके पास पहले से एक उदाहरण है, जो हमें आपके अंतिम प्रश्न पर लाता है:
मैंने लोगों को उपयोग करते देखा है: 799px और फिर 800px जैसी चीजें, लेकिन 799.5 px की स्क्रीन चौड़ाई के बारे में क्या? (स्पष्ट रूप से एक नियमित प्रदर्शन पर नहीं, लेकिन एक रेटिना एक?)
यह मैं पूरी तरह से निश्चित नहीं हूं; CSS में सभी पिक्सेल मूल्य तार्किक पिक्सेल हैं, और मुझे एक ब्राउज़र खोजने में मुश्किल से दबाया गया है जो व्यूपोर्ट चौड़ाई के लिए एक आंशिक पिक्सेल मूल्य की रिपोर्ट करेगा। मैं कुछ iframes के साथ प्रयोग करने की कोशिश की है, लेकिन कुछ के साथ आने में सक्षम नहीं है।
मेरे प्रयोगों से यह आईओएस पर सफारी प्रतीत होगा कि यह सुनिश्चित करने के लिए सभी फ्रैक्शनल पिक्सेल मानों को राउंड करता है , भले ही व्यूपोर्ट वास्तव में 799.5px (जो जाहिरा तौर पर पूर्व से मेल खाता हो) में से एक max-width: 799pxऔर min-width: 800pxमेल खाएगा।
1 हालांकि इनमें से कोई भी स्पष्ट रूप से सशर्त नियम मॉड्यूल या कैस्केड मॉड्यूल (जिनमें से उत्तरार्द्ध को वर्तमान में एक पुनर्लेखन के लिए स्लेट किया गया है) में स्पष्ट रूप से नहीं कहा गया है , कैस्केड को सामान्य रूप से जगह लेने के लिए निहित है, क्योंकि कल्पना बस किसी भी शैली को लागू करने के लिए कहती है। और सभी @mediaनियम जो ब्राउज़र या मीडिया से मेल खाते हैं।