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

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组件添加到较大的max-width：

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

这应该告诉系统将这两个选择分开，因为＆lt; 980也总是＆lt; 1500。