为什么“ width = device-width”完全不起作用？

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

如果您希望网页变小时变成浅蓝色，则表示600px，则应将两种颜色交换

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