css - 媒体查询不起作用？响应式网络

Question

我目前正在尝试为不同的设备大小创建一个具有不同媒体查询的网站，问题是，当我在 media-queries.css 文件中为不同的视口添加媒体查询时，浏览器只会读取一个。

我最近添加了一个最大宽度为 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%;
    }

}

Answer 1

将min-width组件添加到更大的最大宽度：

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

这应该告诉系统分离这两个选择，因为 < 980 也总是 < 1500。