सीएसएस विशिष्टता, मीडिया के प्रश्नों और न्यूनतम-चौड़ाई

Question

मेरे मन में उत्तरदायी वेब डिजाइन के साथ अपने ब्लॉग को फिर से डिज़ाइन कर रहा हूँ, और "मोबाइल पहली" विधि - संक्षेप में मैं उपयोग करने के लिए न्यूनतम-चौड़ाई प्रतिकृति के किसी भी प्रकार से बचने के लिए कोशिश कर रहा हूँ या सीएसएस .. कोई प्रदर्शन: कोई नहीं के आदि ..

मेरे समस्या यह है कि जब मैं करने की आवश्यकता है एक सीएसएस मूल्य कम न्यूनतम-चौड़ाई को प्राथमिकता मिलती है ज्यादा लिखते हैं, है। उदाहरण:

@media only screen and (min-width: 600px) { 
    h2 { font-size: 2.2em; } 
} 

@media only screen and (min-width: 320px) { 
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; } 
} 

मैं उम्मीद थी जब मैं 600px के प्रस्तावों में हूँ और इसके बाद के संस्करण एक 2.2em h2 प्राप्त करने के लिए, लेकिन इसके बजाय मैं 1.7em मिल .. मेरी देव उपकरणों में मुझे लगता है कि 2.2em घोषणा है वहां, लेकिन दूसरे को प्राथमिकता मिलती है .. यह समझ में नहीं आता है!

मैं मिनट-चौड़ाई का उपयोग जारी रखना कर सके और प्रभावी ढंग से मजबूत चयनकर्ताओं या अधिकतम-चौड़ाई का उपयोग किए बिना उच्च प्रस्तावों में घोषणाओं के ऊपर लिख ..?

Answer 1

मैं उम्मीद थी जब मैं 600px के प्रस्तावों में हूँ और इसके बाद के संस्करण एक 2.2em h2 प्राप्त करने के लिए, लेकिन इसके बजाय मैं 1.7em मिल .. मेरी देव उपकरणों में मुझे लगता है कि 2.2em घोषणा वहाँ है, लेकिन दूसरा एक प्राथमिकता लेता है .. यह समझ में नहीं आता है!

यह समझ में आता है। यदि मीडिया min-width: 600px को पूरा करता है, तो इसे min-width: 320px भी पूरा करना चाहिए; दूसरे शब्दों में, कम से कम 600 पिक्सल चौड़ा कुछ भी कम से कम 320 पिक्सल चौड़ा है, क्योंकि 600 320 से अधिक है।

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

h2 { font-size: 2.2em; } 
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; } 

बताते हैं यही कारण है कि 2.2em अपने डेवलपर उपकरण में प्रकट होता है, लेकिन स्पष्ट प्रभाव नहीं ले करता है।

सबसे आसान फिक्स सही क्रम में अपने नियमों झरना तो चारों ओर अपने @media ब्लॉक स्विच करने के लिए है:

@media only screen and (min-width: 320px) { 
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; } 
} 

@media only screen and (min-width: 600px) { 
    h2 { font-size: 2.2em; } 
}