Question

这是我第一次尝试将不同的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无济于事。

Answer 1

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元素，因此假设您的HTML中包含<body>标记，则当设备符合宽度条件时，将应用上述CSS样式。

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

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

编辑：找出解决此问题的!important标记，您可以阅读有关CSS优先级here的更多信息。

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

1 个答案: