css - 我如何使这些媒体查询工作？

Question

我正在尝试将媒体查询添加到我的主页横幅图片中。我希望它能够响应并根据所使用的屏幕更新为 3 种不同的图像尺寸。当前仅显示中等大小的图像。请告知我的代码有什么问题。谢谢。

这是我的代码:

/*---------------------------------------------
      Section#Slider [Banner Image]
-----------------------------------------------*/
/* NEXUS 5 Size 412px, XS
(less than 786px no media query since this is
default in Bootstrap)
*/

/* IPAD SIZE 768px and up, S*/

@media screen and (min-width: 550px) {
    #slider {
        background: url("../img/smartphoneweb_640x285.jpeg") no-
        repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: 10% 0%;
        padding: 200px 0 280px 0;
        position: relative;
    }
 }

/* MD, desktops, 992px and up */

@media (min-width: 950px) {
    #slider {
        background: url("../img/smartphoneweb_1280x570.jpeg") no-
        repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: 10% 0%;
        padding: 200px 0 280px 0;
        position: relative;
    }
}

/* LG, large desktops, 1200px and up */

@media (min-width: 1200px) {
    #slider {
        background: url("../img/smartphoneweb_1920x855.jpeg") no-
        repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: 10% 0%;
        padding: 200px 0 280px 0;
        position: relative;
    }

}

Answer 1

主要问题是您忘记在 992px 媒体查询中添加屏幕。我进行了更改，这可能会有所帮助。

/*---------------------------------------------
      Section#Slider [Banner Image]
-----------------------------------------------*/
/* NEXUS 5 Size 412px, XS
(less than 786px no media query since this is
default in Bootstrap)
*/

/* IPAD SIZE 768px and up, S*/

@media screen and (min-width:0px) and (max-width:550px) {
    #slider {
        background: url("../img/smartphoneweb_640x285.jpeg") no-
        repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: 10% 0%;
        padding: 200px 0 280px 0;
        position: relative;
    }
 }

/* MD, desktops, 992px and up */

@media screen and (min-width:551px) and (max-width:992px){
    #slider {
        background: url("../img/smartphoneweb_1280x570.jpeg") no-
        repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: 10% 0%;
        padding: 200px 0 280px 0;
        position: relative;
    }
}

/* LG, large desktops, 1200px and up */