Css 移动设备上的图像不变

我希望我使用的图像作为背景，改变到更小的版本，通过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%;}}

---

这可能真的是某种特定性问题。您可以尝试在元素之前添加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%;
    }
}

@仅媒体屏幕和（最小宽度：375px）和（最大宽度：667px）和（方向：横向）{
html#幻灯片1{
背景：url（../images/slides/mobiletest.jpg）中心不重复；
-webkit背景大小：100%100%！重要；
-moz背景尺寸：封面！重要；
背景尺寸：100%100%！重要；
背景附件：固定！重要；
宽度：100%！重要；
}
}

我个人会使用PHP识别浏览器类型，然后为每个浏览器显示特定的样式表。可能在

global.css

上有一些元素在浏览器格式更改之间不会更改。然后是

desktop.css

，然后是

mobile.css

。您还可以使用jQuery/JavaScript。我也相信HTML5现在允许你识别移动设备。不过我还是会选择PHP。好吧，我很可能会采用这种方法。你知道有什么工具可以让我通过浏览器在移动设备上查看我的网站。当我检查实际的移动设备时，我发现的工具不准确。你可以尝试使用Google chrome mobile simulator进行测试。@AdamParish我不确定是否准确，而且有这么多不同的移动设备，很难测试每个显示。此外，根据您对CSS的重视程度，您可能希望创建PHP函数和一些简单的

if

语句，以便为每个设备添加不同的样式表。PHP代码可能会运行很长时间，但可以使用多个较小的样式表更快地加载页面，这些样式表仅在需要时调用，而不是一个较大的样式表。