Question

我需要在移动视图中丢失背景图片，但我的@media查询似乎忽略了请求，这也适用于我正在使用的图像？

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .logo {
    background-image:URL(img/allthingslogoalt.gif);
    height:32px;
    width:222px;
    margin:110px auto 0 auto;
    background-size:444px 64px;
}

}   

}


@media screen and (max-device-width: 800px) {

#allthingsus {
    background-color:#FFF;


}

}


@media screen and (max-device-width: 480px) {
#allthingsus {
    background-color:#FFF;


}
}

这是主要的css：

.logo {
    background-image:URL(img/allthingslogo.gif);
    height:64px;
    width:444px;
    margin:180px auto 0 auto;
}

#allthingsus {
    background-color:#FFF;
    background-image:URL(img/greypointer.gif);
    background-repeat:no-repeat;
    background-position:top center;


}

我不确定如何解决这个问题？我曾尝试将其添加为类，ID，更改最小/最大高度但没有任何变化？

Answer 1

假设这是试图改变背景图像的位：

@media screen and (max-device-width: 480px) {
#allthingsus {
    background-color:#FFF;
}

您只是设置背景颜色，因此不会更改背景图像。您需要为此媒体查询设置background-image: none;。

修改

无法使用媒体查询max-device-width进行真正的测试，所以在这里使用max-width做了一个小提琴（http://jsfiddle.net/rnewport/em35H/1/），而它似乎正常工作

在移动视图中丢失背景图像

1 个答案: