@mediaクエリ - 1つのルールが別のルールを上書きしますか？

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%; 
    } 
} 

あなたが1024px（とも800ピクセル、最大幅のクエリを）見ることができるように#wrapの幅を変更すると正常に動作しません。 1400px max-widthクエリを追加すると、すべてのサイズに対して72％に変更され、同じ要素に対して同じ処理が行われます。たとえば、#slider imgを40pxのマージンに設定すると、すべてのサイズで表示されます1400ピクセルの最大幅にしかありません。

本当に明白なものがありませんか？過去2日間このことをやろうとしていました！ ありがとう、ジョン

Answer 1

私は完全に従っているかどうかはわかりませんが、@mediaのルールはこれが望ましい動作であることを示唆しています。画面が1400ピクセル以下の場合、#wrapの幅は72％になります。これは他のメディアクエリで言及されている他のすべてのサイズを含みます。

、あなたはまた、CSSでの事項を注文することを覚えておく必要がありだけ... 1024px、あなたはそれを変更する必要が1400pxの間で適用されます

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

EDIT ...

にそれを望んでいた場合

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

1024pxを超える画面では、#wrapの幅は最初のメディアクエリにのみ一致するため、72％になります。画面が1024ピクセル未満の場合、#wrapの幅は両方のメディアクエリで一致しますが、100％になります。 1024px下画面用にレンダリングされるCSSは次のようになります...あなたはルールの順序を入れ替えた場合、スタイルシートで定義された後に

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

ルールは、http://www.w3.org/TR/CSS21/cascade.html#cascading-order 6.4.1ポイント4.そのため、以前のルールを上書きします。彼らがいたかのように1024px下の画面は、両方のルールが表示されますので、ALL画面が1400pxまでのサイズのために

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

#wrapの幅は...

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

72％になります1024pxを超えるスクリーンます参照...

#wrap { 
width: 72%; 
} 

どちらも同じ結果です。