CSS में मीडिया क्‍वेरी का क्रम क्‍यों मायने रखता है?

Question 1

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

यहाँ एक उदाहरण है:

एचटीएमएल

<body>
    <div class="one"><h1>Welcome to my website</h1></div>
    <div class="two"><a href="#">Contact us</a></div>
</body>

सीएसएस:

body{
font-size:1em; /* 16px */
}

.two{margin-top:2em;}



/* Media Queries */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}

}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
            }
/*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}

हालाँकि, अगर मैंने अंतिम में 1024x600 के लिए क्वेरी लिखी, तो ब्राउज़र इसे अनदेखा करेगा और सीएसएस (मार्जिन-टॉप: 2 एएम) की शुरुआत में निर्दिष्ट मार्जिन मूल्य लागू करेगा।

/* Media Queries - Re-arranged version */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}
 /*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}

अगर मीडिया के प्रश्नों के बारे में मेरी समझ सही है, तो आदेश पर कोई फर्क नहीं पड़ता, लेकिन ऐसा लगता है। क्या वजह हो सकती है?

Question 2

यह CSS - कैस्केडिंग स्टाइल शीट के डिजाइन द्वारा है।

इसका अर्थ यह है कि, यदि आप दो नियमों को लागू करते हैं जो समान तत्वों से टकराते हैं, तो यह अंतिम एक को चुनेगा जो घोषित किया गया था, जब तक कि पहले वाले के पास !importantमार्कर या अधिक विशिष्ट न हो (जैसे कि html > bodyबस बनाम body, बाद वाला कम विशिष्ट है)।

तो, यह सीएसएस दिया

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

यदि ब्राउज़र विंडो 350 पिक्सेल चौड़ी है, तो पृष्ठभूमि नीली होगी, जबकि इस सीएसएस के साथ

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

और एक ही खिड़की की चौड़ाई, पृष्ठभूमि लाल होगी। दोनों नियम वास्तव में मेल खाते हैं, लेकिन दूसरा ऐसा है जिसे लागू किया जाता है क्योंकि अंतिम नियम है।

अंत में, साथ

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

या

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

पृष्ठभूमि नीली होगी (350 पिक्सेल चौड़ी खिड़की के साथ)।

Question 3

या आप केवल बड़ी मीडिया क्वेरी / ies में मिनट-चौड़ाई जोड़ सकते हैं और आदेश की परवाह किए बिना कोई समस्या नहीं है।

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

स्निपेट का विस्तार करें

इस कोड का उपयोग करते हुए, किसी भी क्रम में, 400.1px-600px की चौड़ाई के साथ रिज़ॉल्यूशन के लिए पृष्ठभूमि-रंग हमेशा लाल रहेगा, और 400px या उससे कम की चौड़ाई वाले प्रस्तावों के लिए हमेशा नीला होगा।