Html 为什么媒体查询在devtools中工作；切换设备工具栏“；模式不'；不能在Chrome浏览器中工作？

在devtools“

切换设备工具栏

”模式下检查与媒体查询相关的部分代码时没有问题。但在关闭预览后，我发现该代码在浏览器中不起作用。为什么会这样？我认为这与Chrome浏览器有关。因为我的代码在Firefox中工作正常

// Main CSS

div#top-header {
    grid-area: theader;
    background-color: #FA6938;
    display: flex;
    padding: 0 5px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

// This is still working

@media screen and (min-width: 600px) { div#top-header { padding: 0 15px; } }

// This code is running in "toggle device toolbar" mode but not running when I close the preview

@media screen and (min-width: 1120px) { div#top-header { padding: 0 14%; } }

你有吗

<meta name="viewport" content="width=device-width">

---

在html的“头”中

也许devtools改变了窗口的“宽度”，看起来媒体查询没有运行。不，它以1120像素以上的宽度打开。谢谢。如果第一个状态是600px，第二个是1120px，那么它应该超越规则。尝试添加标志'！对第二媒体很重要。我试过了，但没用。你知道问题出在哪里吗？