0

私は次のcssを持っています:

@media screen and (max-width: 1024px) {
    .directory-container {
        width: 100%;
    }

    .directory-container .banner-description {
        width: 100%;
    }

    #main-site h1 {
        left: 20%; 
    }

    #insta-shop-grid .profile-user .user-bio {
         left: 20%; 
    }

    .banner-title {
        margin-top: -20px;
    }

    #main.products .filter {
        margin: 0px 0px 0px 0px;
    }
}

画面のサイズを 1024 に変更したところ、.banner-title が正しく適用されました。しかし、なぜmain.products .filter適用されないのでしょうか。

完全なサイトはここで見ることができます。ウィンドウのサイズを幅 1024 に変更するだけです。

4

2 に答える 2

0

（Firebugによると）明らかに一致しているルールは

@media="screen"
#main.products .filter {
    margin: 5px 30px;
}

さまざまな .css ファイルがたくさんあります。このルールは にあり3a76827_part_6_product-and-profile_11.cssます。適用されると予想されるルールがどこにあるかはわかりませんが、これより前に読み込まれる CSS ファイルにあるに違いありません。理由は次のとおりです。

何が起こっているのかを理解するには、@media クエリがどのように適用されるかを理解する必要があります。CSS ルールが 2 つのメディア クエリ間で同じである場合、最後のメディア クエリが適用されます。そのため、@media screen and (max-width: 1024px)ルールがルールの前に読み込まれる@media screenと、後者のルールが適用されます。

同様の質問については、こちらを参照してください: CSS でメディア クエリの順序が重要なのはなぜですか?

于 2013-09-30T03:45:17.737 に答える