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 */

Answer 2

您可以使用min and max media query

处理spicifique屏幕尺寸的样式

    @media screen and (min-width: 550px) and (max-width: 950px){
        #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)  and (max-width: 1200px){
        #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;
        }
    }  
    @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;
        }

    }

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

2 个答案: