如何使用Firefox响应式设计模式进行媒体查询

Question

每当我按下ctrl + shift + m进入Firefox的响应式设计模式时，它会在左上方显示屏幕尺寸，但是如果我在这里看到992px作为宽度，则创建此媒体查询：

@media (min-width: 992px) {
    /*stuff to happen at 992px*/
}

根据Firefox的说法，应该发生在992px的东西实际上发生在1082px。为什么是这样？有没有办法让Firefox的测量值与媒体查询产生的结果完全匹配？

此外，根据媒体查询，应该发生在768px的东西似乎发生在838px。

Answer 1

答案是Firefox的缩放量与响应式设计模式测量结果混杂在一起。显然，响应式设计模式中显示的尺寸不是网站的虚拟尺寸，而是屏幕尺寸，因此当Firefox放大或缩小时它们不会改变。

Answer 2

试用此代码：

@media (max-width: 992px) {
    /*stuff to happen at 992px*/

    body{
      background: #000;
    }
}

而不是

@media (min-width: 992px) {
    /*stuff to happen at 992px*/
}

Answer 3

在Firefox中，请确保在测试网站响应性时确定，浏览器缩放设置仅为100％。它会影响RDM（自适应设计模式）中显示的屏幕宽度。

我不确定其他人，但是我早些时候遇到过同样的问题。