5

複数の@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（および800pxの最大幅クエリ）は#wrap幅を変更せず、正常に機能します。1400pxの最大幅クエリを追加するとすぐに、すべてのサイズで72％に変更され、どの要素でも同じようになります。たとえば、＃slider imgのマージンを40pxに設定すると、すべてのサイズで表示されます。それは1400pxの最大幅にのみあります。

私は本当に明白な何かを逃していますか？過去2日間、これを解決しようとしています！ありがとう、ジョン

4

1 に答える 1

12

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

1024px から 1400px の間にのみ適用したい場合は、次のように変更する必要があります...

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

EDITまた、CSS では順序が重要であることを覚えておく必要があります...

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

1024px を超える画面で#wrapは、最初のメディア クエリのみに一致するため、幅は 72% になります。画面が 1024px 未満の場合、幅は#wrap100% になりますが、両方のメディア クエリで一致します。1024px 未満の画面用にレンダリングされる 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%;
    }
}

1024px#wrap未満の画面では両方のルールが...

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

1024px以上の画面では...

#wrap {
width: 72%;
}

どちらも同じ結果になります。

于 2012-10-10T15:35:22.627 に答える