为什么我的媒体查询不起作用？

Question

我的CSS看起来如下：

@media  (max-device-width:480px) {
    {
        body{background: red;}
   }
}

当我将浏览器的大小调整为iphone宽度时，我看不到身体变红背景。你们知道发生了什么吗？我也试过@media (max-width:480px)

仅供参考我有元视图帖子标签也设置为：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" name="viewport">

Answer 1

您必须将其设置为此

@media only screen and (max-width:480px) {

    body{background: red;}

}

EDIT 忘了解释我的变化。

我删除了媒体查询中的额外括号。但最重要的是改变它，以便它只针对屏幕（如上所述是可选的）。并将max-device-width更改为max-width，因为您已在meta标记中说明宽度应为设备宽度的值。

Answer 2

max-width是正确的（max-device-width将是屏幕大小，而不是窗口大小）但你有额外的大括号。拿出来：

@media  (max-width:480px) {
    body {
        background: red;
    }
}