为什么“宽度=设备宽度”完全不起作用？

Question

我在设备上设置媒体查询时遇到问题。 它根本不起作用。 它像正常宽度一样工作。 这是为什么？

<meta charset="UTF-8" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">

这就是我使用它的方式：

@media only screen and (min-width: 600px) {
    background-color: lightblue;
}

Answer 1

这很简单。 你没有把background-color: lightblue; 在标签中，它应该位于html或body标签之类的东西中。

您还应该将元标记更新为

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

您的代码应如下所示：

 html{ background-color:red; } @media only screen and (min-width: 600px) { html{ background-color: lightblue; } }

 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

如果您希望网页在小于 600 像素时变成浅蓝色，则应交换两种颜色

有关更多信息，您可以访问w3schools，他们非常清楚地解释了媒体查询。