@media查詢 - 一個規則覆蓋另一個規則？

Question

我有多個@media查詢所有工作正常，但只要我把一個更高的最大屏幕寬度比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%; 
    } 
} 

你可以看到1024像素（也是最大寬度爲800px的查詢）不會改變#wrap寬度並且工作正常。只要我添加1400px最大寬度查詢，它會將它們更改爲72％，對於所有尺寸，對於任何元素都是一樣的 - 例如，如果我將#slider img設置爲具有40px的邊距，它將以所有尺寸顯示，儘管它只在最大寬度1400px。

我是否錯過了一些非常明顯的東西？過去兩天一直試圖解決這個問題！ 謝謝，約翰

Answer 1

我不確定我完全遵循，但你的@media規則表明這是你想要的行爲。如果屏幕爲1400px，並且#wrap的寬度爲72％，則這包括其他媒體查詢中提及的所有其他尺寸。

如果你想讓它僅1,024像素之間並應用1400px你需要改變它......

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

編輯你還必須記住，在訂貨事宜CSS ...

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

對於1024像素以上的屏幕，#wrap的寬度將爲72％，因爲它們只會匹配第一個媒體查詢。如果屏幕低於1024px，則#wrap的寬度將爲100％，但它將與兩個媒體查詢匹配。將1,024像素下呈現的屏幕將類似於CSS ......後來在樣式表中定義

#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因爲1,024像素下屏幕上會看到這兩個規則，如果他們......

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

超過1,024像素屏幕上會請參閱...

#wrap { 
width: 72%; 
} 

兩者都有相同的結果。