css - 图片在移动设备上没有变化

Question

我希望我用作背景的图像通过 css 媒体查询更改为较小的版本。

我不太清楚为什么它不能在移动设备上运行。

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : landscape){

#slide1 {
background: url(../images/slides/mobiletest.jpg) center center no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: cover;
background-size: 100% 100%;
background-attachment: fixed;
width: 100%;}}

Answer 1

这可能真的是一些特异性问题。您可以尝试在元素之前添加一个 html 选择器:

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : landscape){

    html #slide1 {
        background: url(../images/slides/mobiletest.jpg) center center no-repeat;
        -webkit-background-size: 100% 100%;
        -moz-background-size: cover;
        background-size: 100% 100%;
        background-attachment: fixed;
        width: 100%;
    }
}