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; }
}

我期望在这里发生的是test-div在窗口为＆lt; = 700px时具有蓝色背景，并且当窗口为＆gt; = 701px时测试div变为黄色。

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

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

Answer 1

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