如何在 Firefox 中禁用媒体查询支持？

Posted 2023-03-06

【中文标题】如何在 Firefox 中禁用媒体查询支持？

【英文标题】：How to disable media queries support in firefox?

【发布时间】：2013-06-02 03:12:57

【问题描述】：

我有一个广泛使用 CSS3 媒体查询的移动网站。

我想为不支持媒体查询的浏览器创建一个版本，为它们添加一个额外的 css 文件，覆盖一些 css 规则。

我想知道是否有一种方法可以禁用 Firefox (21.0) 中的媒体查询支持以便能够开发，因为我没有其他东西可以测试。

Chrome 解决方案也可以，但我更喜欢使用 firebug。

【问题讨论】：

可以注释掉所有的媒体查询CSS链接...

我宁愿覆盖部分规则，我假设其中一部分得到解释。它们太大了，我认为从头开始需要很长时间。

【参考方案1】：

您总是可以尝试在 IE 8 中进行测试。

【讨论】：

我明白了，谢谢。在我开始使用这个之前，我会等待一段时间，看看是否有人找到了 Firefox 的解决方案。

【参考方案2】：

你有它倒退。媒体查询和相应的规则被不支持它们的浏览器隐式忽略。因此，通用/基本规则必须在专门规则之前出现，反之亦然。

您应该始终在目标环境中进行测试。如果这不是一个选项，您可以将特定于媒体的规则放在单独的样式表中并禁用该样式表，例如使用 html cmets 或 Web Developer extension（显然扩展的此功能在 Chromium/Chrome 中不可用，但是您可以禁用“手持样式”）。与 Web Developer 和 Chrome Dev Tools 一样，您可以像使用相应的视口一样测试特定于媒体的样式表。但不要依赖于此；它不仅仅是视口大小。

【讨论】：

通用规则设置在专门的媒体查询之前。不幸的是，它们对于具有 MQ 支持的不同屏幕尺寸很常见，而不是没有 MQ 支持。如果我更改它们，它将破坏当前的布局，所以我必须在之后覆盖它们。样式目前有点乱，格式为 (common-mq-common-mq-common...)，我根本不想弄乱它们。

【参考方案3】：

媒体查询是您在 CSS 中定义的内容，如果浏览器不理解媒体查询，它不支持它，它不会执行使网站响应的 CSS。

因此，您将在不支持媒体查询的浏览器中拥有一个无响应的网站，这就是媒体查询的全部意义所在。

在任何浏览器中都没有禁用媒体查询的选项。

如果您想在不启动媒体查询的情况下测试您的网站，请在 CSS 中注释掉规则。使用这种方法，您可以继续在 Firefox 中进行测试，而无需在 Internet Explorer 8 中进行测试

【讨论】：

我最终使用了一个单独的 css 文件，我在其中放置了 MQ 规则以获得更小的分辨率，没有 MQ 条件。非常感谢您的帮助。