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

Question

每当我在 Firefox 中按 ctrl+shift+m​​ 进入响应式设计模式时，它会在左上角显示屏幕尺寸，但如果我在这里看到 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（响应式设计模式）中显示给您的屏幕宽度。

我不确定其他人，但我之前遇到过同样的问题。