html - Firefox 中奇怪的媒体查询行为

Question

当我在 Firefox 中使用媒体查询时发生了一些奇怪的事情。

<div style="width:100px;height:100px;" class="test"></div>

@media (min-width: 701px) {
    div.test { background-color: yellow; }
}
@media (max-width: 700px) {
    div.test { background-color: blue; }
}

我期望这里发生的是当窗口 <= 700px 时测试 div 具有蓝色背景，而当窗口 >= 701px 时测试 div 变为黄色。

这是一个 JSFiddle:https://jsfiddle.net/wmtanujf/embedded/result/

如果您打开这个全屏(在 Firefox 中，最新版本)然后使用 Ctrl+Shift+M，例如，您可以将窗口大小设置为:702 x 300，您会注意到它没有设置背景。为什么会这样？

Answer 1

我认为您的 firefox 版本有问题。你必须更新你的 firefox 版本到最新更新