0

现场直播。

这是我第一次尝试为移动设备和常规屏幕使用不同的 CSS。为此，我正在使用-

@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无济于事。

4

1 回答 1

2 
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>的 HTML 中有一个标签，则当设备满足宽度标准时，将应用上述 CSS 样式。

编辑：也试试这样的背景，如果文件在那里应该工作......

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

编辑：原来是一个标签修复了这个问题，你可以在这里!important阅读更多关于 CSS 优先级的信息。

于 2012-08-29T21:37:01.713 回答