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

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">

score 2 · Accepted Answer

您必须将其设置为此

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

    body{background: red;}

}

编辑忘记解释我的更改。

我删除了媒体查询中多余的括号。但最重要的是对其进行了更改，使其仅针对屏幕（如上所述是可选的）。并更改max-device-width为max-width您已经在meta标签中声明的宽度应该是设备宽度的值。

score 2 · Accepted Answer

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

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

2 回答 2