添加背景颜色的最简单媒体查询不起作用？答案

【问题标题】：Simplest Media Query to add a background color not working?添加背景颜色的最简单媒体查询不起作用？
【发布时间】：2021-07-10 02:15:25
【问题描述】：

我觉得自己像个白痴……

这是最简单的事情，但它不适用于除 Firefox 之外的任何浏览器。

我在 html 的头部/样式部分声明它

任何帮助将不胜感激 - CES

body {
    background-color: yellow;
    font-size: 1vw;
}

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

    body{
        background-color: red;
    }

}

【问题讨论】：

它工作正常兄弟：jsfiddle.net/75uLyfvw
好吧，我知道问题出在哪里，但现在我有一个新问题...问题是我在浏览器中使用 Inspect (ctl + shift + i) / toggle device emulation 来查看设备特定的断点。它以任何其他方式工作，但不在一个应该工作的地方。关于为什么的任何线索？？
你愿意告诉我们ONE PLACE在哪里吗？

【解决方案1】：

问题出在头部并且缺少元标记...为了让您在 Chrome、Edge 和 Safari 中使用开发者工具设备空间断点，您必须包括：

meta name="viewport" content="width=device-width, initial-scale=1.0"

当您在浏览器中查看页面时，它可以在不包含它的情况下工作，但为了使用开发者工具，它必须位于头部。

【讨论】：