] इसके लिए विशिष्ट स्क्रीन आकारों के उपकरणों को लक्षित करने के लिए न्यूनतम-चौड़ाई मीडिया प्रश्नों के उपयोग की आवश्यकता होती है। हालाँकि, यह भ्रामक हो सकता है जब उच्च स्क्रीन रिज़ॉल्यूशन के लिए CSS मानों को ओवरराइट करना, क्योंकि कम न्यूनतम-चौड़ाई पूर्वता लेती है।

यह इसलिए है क्योंकि मीडिया क्वेरी का मूल्यांकन कम से कम प्रतिबंधात्मक से सबसे अधिक प्रतिबंधात्मक तक किया जाता है। प्रदान किए गए उदाहरण में:

@मीडिया केवल स्क्रीन और (न्यूनतम-चौड़ाई: 600px) { H2 {फ़ॉन्ट-आकार: 2.2EM; } } @Media केवल स्क्रीन और (न्यूनतम-चौड़ाई: 320px) { H2 {फ़ॉन्ट: सामान्य 1.7em/2.1em हेल्वेटिका, सैंस-सेरिफ़; } } दोनों मीडिया क्वेरी सच हैं जब स्क्रीन की चौड़ाई 600px या अधिक होती है। हालाँकि, दूसरा नियम बाद में कैस्केड में होता है, इसलिए यह पूर्ववर्तीता लेता है और छोटे 1.7em फ़ॉन्ट आकार को लागू किया जाता है। क्वेरी:

@मीडिया केवल स्क्रीन और (न्यूनतम-चौड़ाई: 320px) { H2 {फ़ॉन्ट: सामान्य 1.7em/2.1em हेल्वेटिका, सैंस-सेरिफ़; } } @Media केवल स्क्रीन और (न्यूनतम-चौड़ाई: 600px) { H2 {फ़ॉन्ट-आकार: 2.2EM; } }

यह सुनिश्चित करता है कि स्क्रीन की चौड़ाई कम से कम 600px होने पर बड़ा फ़ॉन्ट आकार लागू होता है। यह आपको अपेक्षित कैस्केडिंग विशिष्टता देगा, जिसमें उच्च न्यूनतम-चौड़ाई की पूर्वता है।