移动设备 - 不同的背景 - 媒体查询不工作

这是我在利用不同的CSS为移动设备与普通屏幕的第一次尝试。要做到这一点，我using-

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
     background: url('img/background.jpg') no-repeat center center fixed; 
     background-size: cover; 
     height: 100%; 
}

然而，它似乎并没有工作（我可以在iPhone上唯一的测试）。任何想法，为什么这可能是？我也试过@media all无济于事。

来源

2012-08-29 AMC

你确定它不起作用吗？您是否尝试过使用纯色的“背景色”来查看图片是否有问题？ –

您没有在该代码中定位HTML元素？ – cih

@RoddyoftheFrozenPeas是的，改成'background：red;'没有效果。 – AMC

media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
     body{ 
      background: url('img/background.jpg') no-repeat center center fixed; 
      background-size: cover; 
      height: 100%; 
     } 
}

的身体是你的目标所以假设你在你的HTML一个<body>标签的CSS样式上面会时，该设备符合标准宽度施加的HTML元素。

编辑：也可以尝试这样的背景下，如果该文件是应工作...

background: transparent url(/img/background.jpg/) no-repeat center center fixed;

编辑：原来的!important标签修复了这个问题，你可以阅读更多关于CSS优先here。

来源

2012-08-29 21:37:01 cih

啊，是的。这就说得通了。但是，进行这些更改仍然不会改变移动背景？ – AMC

hmm ..文件路径是否正确？固体背景颜色是否像Roddy所建议的那样工作？试试www.yoururl.com/img/background.jpg – cih

文件路径绝对正确。我试过使用纯色，以及'html'而不是'body'，没有改变。 – AMC

移动设备 - 不同的背景 - 媒体查询不工作

回答

相关问题