दिलचस्प पोस्ट
मैं जावा स्टैक ट्रेस डंप की प्रदर्शित लाइनों की संख्या कैसे बढ़ाऊं? डुप्लिकेट फ़ाइलों को ढूँढना और उन्हें निकालना प्रोटोकॉल स्वयं के अनुरूप नहीं है? एंड्रॉइड: डेटपिकर डिवाइडर का रंग कैसे बदल सकता है? आप एक मोंगोज़ क्वेरी द्वारा दिए गए डेटा को संशोधित क्यों नहीं कर सकते (उदा: खोजबीआईआईडी) पायथन में मेमोरी जारी करना पायथन में स्ट्रिंग से पूर्णांक मान कैसे प्राप्त करें? पिछले ड्रॉपडाउन चयन के आधार पर एक दूसरा ड्रॉपडाउन दिखाएं जांचें कि एक पूर्णांक किसी अन्य की पूर्णांक शक्ति है या नहीं एक ही URL के लिए एकाधिक अजाक्स अनुरोध JSON.पार्स बनाम eval () DialogFragment में अलर्ट डायलॉग के कस्टम दृश्य को बढ़ाना समस्या सबसे कुशल जावा आदिम संग्रह पुस्तकालय मैं पायथन में एक MySQL डाटाबेस से कैसे कनेक्ट करूं? PHP और कर्ल के साथ Google में प्रवेश करें, कुकी बंद हो गई?

सीएसएस मीडिया क्वेरी ओवरलैप के लिए नियम क्या हैं?

ओवरलैप से बचने के लिए हम मीडिया प्रश्नों को ठीक से कैसे निकालते हैं?

उदाहरण के लिए, यदि हम कोड पर विचार करते हैं:

@media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } 

सभी सहयोगी ब्राउज़रों में, 20 वें और 45 एम पर क्या होगा?

मैंने लोगों को देखा है: 79 9 पीएक्स और 800px की तरह चीज़ें, लेकिन स्क्रीन की चौड़ाई 799.5 पिक्स के बारे में क्या है? (जाहिर नहीं, एक नियमित प्रदर्शन पर, लेकिन एक रेटिना एक?)

मैं कल्पना के बारे में यहां उत्तर के बारे में सबसे उत्सुक हूं।

वेब के समाधान से एकत्रित समाधान "सीएसएस मीडिया क्वेरी ओवरलैप के लिए नियम क्या हैं?"

सीएसएस मीडिया क्वेरी ओवरलैप के लिए नियम क्या हैं?

कास्केड।

@media नियम झरना के लिए पारदर्शी हैं, इसलिए जब दो या दो से अधिक @media नियम एक ही समय से मेल खाते हैं, तो ब्राउज़र को उन सभी नियमों में शैलियों को लागू करना चाहिए, जो मैच करते हैं और तदनुसार झरना को हल करें। 1

सभी सहयोगी ब्राउज़रों में, 20 वें और 45 एम पर क्या होगा?

वास्तव में 20 मीटर चौड़ा, आपकी पहली और दूसरी मीडिया क्वेरी दोनों ही मैच होगी। ब्राउज़र, दोनों के @media नियमों और शैली के अनुसार कैस्केड लागू करेंगे, इसलिए अगर कोई विरोधाभासी नियमों को ओवरराइड करने की आवश्यकता है, तो अंतिम घोषणा वाली एक जीत (विशिष्ट चयनकर्ताओं, !important , आदि के लिए लेखा) इसी तरह दूसरी और तीसरी मीडिया क्वेरी के लिए जब व्यूपोर्ट ठीक 45 मीटर चौड़ा है

अपने उदाहरण कोड को ध्यान में रखते हुए कुछ वास्तविक शैली नियमों के साथ जोड़ा गया:

 @media (max-width: 20em) { .sidebar { display: none; } } @media (min-width: 20em) and (max-width: 45em) { .sidebar { display: block; float: left; } } 

जब ब्राउज़र व्यूपोर्ट बिल्कुल 20 मील चौड़ा होता है, तो इन दोनों मीडिया प्रश्नों को सही होगा। झरना द्वारा, display: block ओवरराइड display: none और float: left वर्ग के साथ किसी भी तत्व पर लागू होगा। .sidebar

आप इसे नियमों को लागू करने के बारे में सोच सकते हैं जैसे कि मीडिया प्रश्नों के साथ शुरू करने के लिए नहीं थे:

 .sidebar { display: none; } .sidebar { display: block; float: left; } 

इस अन्य उत्तर में ब्राउज़र की दो या अधिक मीडिया प्रश्नों से मेल खाने पर कैस्केड कैसे होता है इसका एक और उदाहरण।

हालांकि चेतावनी @media , यदि आपके पास उन घोषणाएं हैं जो @media दोनों नियमों में ओवरलैप नहीं करते हैं, तो उन सभी नियम लागू होंगे यहां क्या होता है @media दोनों नियमों में घोषणाओं का एक संघ है, न कि केवल पूर्व को पूरी तरह से अतिरंजित करना … जो हमें आपके पहले प्रश्न पर लाता है:

ओवरलैप से बचने के लिए हम मीडिया प्रश्नों को ठीक से कैसे निकालते हैं?

यदि आप ओवरलैप से बचने की इच्छा रखते हैं, तो आपको बस मीडिया प्रश्नों को लिखना होगा जो परस्पर अनन्य हैं

याद रखें कि min- और max- उपसर्गों का मतलब "न्यूनतम समावेशी" और "अधिकतम समावेशी"; इसका मतलब है (min-width: 20em) और (max-width: 20em) दोनों एक व्यूपोर्ट से मेल खाएंगे जो बिल्कुल 20 नाम है

ऐसा लगता है कि आपके पास पहले से एक उदाहरण है, जो हमें आपके अंतिम प्रश्न पर लाता है:

मैंने लोगों को देखा है: 79 9 पीएक्स और 800px की तरह चीज़ें, लेकिन स्क्रीन की चौड़ाई 799.5 पिक्स के बारे में क्या है? (जाहिर नहीं, एक नियमित प्रदर्शन पर, लेकिन एक रेटिना एक?)

यह पूरी तरह से यकीन नहीं है; सीएसएस में सभी पिक्सेल मान तार्किक पिक्सल हैं, और मुझे एक ब्राउज़र ढूंढने के लिए कड़ी दबाया गया है जो व्यूपोर्ट की चौड़ाई के लिए एक अंशिक पिक्सेल मान की रिपोर्ट करेगा। मैंने कुछ आइफ्रेम के साथ प्रयोग करने की कोशिश की है, लेकिन कुछ भी साथ आने में सक्षम नहीं हुआ है।

अपने प्रयोगों से यह आईओएस पर सफ़ारी को सभी max-width: 799px पिक्सेल मूल्यों को पूरा करने के लिए प्रतीत होता है ताकि max-width: 799px और min-width: 800px max-width: 799px मैच हो जाए, भले ही व्यूपोर्ट वास्तव में 79 9 .5 पीएक्स (जो कि पहले से मेल खाता है)।


1 हालांकि इनमें से कोई भी स्पष्ट रूप से कंडीशनल नियम मॉड्यूल या कैसकेड मॉड्यूल (जिसे बाद में फिर से लिखना है) में स्पष्ट रूप से कहा गया है, तो कैस्केड सामान्य रूप से जगह लेने के लिए निहित है, चूंकि युक्ति केवल किसी भी शैली में शैलियों को लागू करने के लिए कहते हैं और सभी @media मीडिया नियम जो ब्राउज़र या मीडिया से मेल खाते हैं

calc() इस के आसपास काम करने के लिए उपयोग किया जा सकता है (min-width: 50em and max-width: calc(50em - 1px) सही तरीके से स्टैक्ड हो जाएगा), लेकिन खराब ब्राउज़र समर्थन और मैं इसकी सिफारिश नहीं करेगा।

 @media (min-width: 20em) and (max-width: calc(45em - 1px)) { /* slightly wider viewport */ } 

जानकारी:

कुछ अन्य लोगों का उल्लेख है, em यूनिट का उपयोग नहीं करने से आपके प्रश्नों को स्टैकिंग में मदद मिलेगी।