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

【问题标题】：How to use Firefox responsive design mode for media queries如何使用 Firefox 响应式设计模式进行媒体查询
【发布时间】：2016-10-10 05:22:48
【问题描述】：

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

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

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

此外，根据媒体查询应该在 768 像素发生的事情似乎在 838 像素发生。

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个代码：

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

    body{
      background: #000;
    }
}

代替

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

【讨论】：

【解决方案3】：

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

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

【讨论】：