@media प्रश्न - एक नियम दूसरे को ओवरराइड करता है?

Question

मेरे पास एकाधिक काम करने वाले प्रश्न हैं जो सभी काम कर रहे हैं लेकिन जैसे ही मैं 1024px से अधिक अधिकतम स्क्रीन-चौड़ाई डालता हूं, उच्च चौड़ाई के नियम सभी चीज़ों पर लागू होते हैं।

@media screen and (max-width: 1400px) 
    { 
     #wrap { 
     width: 72%; 
     } 
    } 
@media screen and (max-width: 1024px) 
{ 
    #slider h2 { 
    width: 100%; 
    } 
    #slider img { 
    margin: 60px 0.83333333333333% 0 2.08333333333333%; 
    } 
    .recent { 
    width: 45.82%; 
    margin: 10px 2.08333333333334% 0 1.875%; 
    } 
} 

के रूप में आप 1024px गुणा (और यह भी 800px अधिकतम-चौड़ाई क्वेरी) देख सकते हैं #wrap चौड़ाई बदल सकते हैं और ठीक से काम नहीं करते। जैसे ही मैं 1400 पीएक्स अधिकतम-चौड़ाई वाली क्वेरी जोड़ता हूं, यह सभी आकारों के लिए उन्हें 72% तक बदल देता है और किसी भी तत्व के लिए समान होता है - उदाहरण के लिए यदि मैं #plider img को 40px का मार्जिन सेट करता हूं तो यह सभी आकारों पर दिखाएगा यह केवल 1400 पीएक्स की अधिकतम चौड़ाई में है।

क्या मुझे कुछ वास्तव में स्पष्ट याद आ रही है? पिछले 2 दिनों से इसे काम करने की कोशिश कर रहे थे! धन्यवाद, जॉन

Answer 1

मुझे यकीन नहीं है कि मैं पूरी तरह से पालन करता हूं, लेकिन आपके @media नियम बताते हैं कि यह वह व्यवहार है जो आप चाहते हैं। यदि स्क्रीन 1400 पीएक्स है और #wrap की चौड़ाई कम है 72%, इसमें अन्य मीडिया प्रश्नों में उल्लिखित सभी अन्य आकार शामिल हैं।

यदि आप इसे करना चाहता था केवल 1024px गुणा के बीच लागू करते हैं और 1400px आप इसे करने के बदलने की जरूरत है ...

@media screen and (max-width: 1400px) and (min-width: 1024px) 
{ 
    #wrap { 
    width: 72%; 
    } 
} 

संपादित तुम भी याद रखना होगा कि सीएसएस में मायने रखती है ...

आदेश देने

@media screen and (max-width: 1400px) 
{ 
    #wrap { 
    width: 72%; 
    } 
} 
@media screen and (max-width: 1024px) 
{ 
    #wrap { 
    width: 100%; 
    } 
} 

1024px से ऊपर की स्क्रीन के लिए #wrap की चौड़ाई 72% होगी क्योंकि वे केवल पहली मीडिया क्वेरी से मेल खाते हैं। यदि स्क्रीन 1024px से कम है तो #wrap की चौड़ाई 100% होगी, हालांकि यह दोनों मीडिया प्रश्नों से मेल खाई जाएगी। सीएसएस कि 1024px गुणा के तहत एक स्क्रीन के लिए प्रदान की गई हो जाएगा की तरह दिखाई देगा ...

#wrap { 
width: 72%; 
} 
#wrap { 
width: 100%; 
} 

नियम स्टाइलशीट में बाद में परिभाषित पहले नियमों को ओवरराइड करता है http://www.w3.org/TR/CSS21/cascade.html#cascading-order 6.4.1 बिंदु 4. इसलिए, यदि आप नियमों का आदेश बदली ।

@media screen and (max-width: 1024px) 
{ 
    #wrap { 
    width: 100%; 
    } 
} 
@media screen and (max-width: 1400px) 
{ 
    #wrap { 
    width: 72%; 
    } 
} 

#wrap की चौड़ाई 72% के लिए सभी स्क्रीन 1400px अप करने के लिए आकार क्योंकि 1024px गुणा के तहत एक स्क्रीन दोनों नियमों देखेंगे रूप में यदि वे थे हो जाएगा ...

#wrap { 
width: 100%; 
} 
#wrap { 
width: 72%; 
} 

1024px गुणा से अधिक एक स्क्रीन होगा देखें ...

#wrap { 
width: 72%; 
} 

दोनों का एक ही परिणाम है।