0

現在、デバイスサイズごとに異なるメディアクエリを使用してWebサイトを作成しようとしていますが、問題は、異なるビューポートのmedia-queries.cssファイルにメディアクエリを追加すると、ブラウザが1つしか読み取らないことです。

最近、最大幅1500ピクセルのメディアクエリを追加しましたが、max-980pxのメディアクエリが機能しなくなりました。

これがCSSです、私を助けることができる人はいますか？

/************************************************************************************
smaller than 980
*************************************************************************************/

@media screen and (max-width: 980px) {

    .slider-container {
        width:                              100%;
        height:                             100px;
        background-color:                   white;
        overflow:                           hidden;
        -moz-border-radius:                 20px;
        border-radius:                      20px;
    }

    .wrapper .slider-container #slideshow { 
        position:                           relative; 
        width:                              100%;
        height:                             300px;
    }

    .wrapper .slider-container #slideshow > div { 
        position:                           absolute; 
    }

    .wrapper .slider-container #slideshow > div img { 
        border:                             20px solid #00e800;
        height:                             100%;
    }

}

/************************************************************************************
smaller than 1500
*************************************************************************************/

@media screen and (max-width: 1500px) {

    .slider-container {
        width:                              100%;
        height:                             400px;
        background-color:                   white;
        overflow:                           hidden;
        -moz-border-radius:                 20px;
        border-radius:                      20px;
    }

    .wrapper .slider-container #slideshow { 
        position:                           relative; 
        width:                              100%;
        height:                             400px;
    }

    .wrapper .slider-container #slideshow > div { 
        position:                           absolute; 
    }

    .wrapper .slider-container #slideshow > div img { 
        border:                             15px solid #f3f70a;
        height:                             100%;
    }

}
4

1 に答える 1

0

min-width大きい方の最大幅にコンポーネントを追加します。

@media screen and (min-width:981px) and (max-width: 1500px) {

<980も常に<1500になるため、これは2つの選択肢を分離するようにシステムに指示する必要があります。

于 2013-03-15T15:13:50.893 に答える