media-queries - 互操作性 : Enquire. js 不执行 Respond.js 触发的 css 媒体查询

Question

好的，所以我使用 Respond.js遗留浏览器(ie8 是最重要的)上的媒体查询的 polyfill。

与此同时，我正在研究使用 Enquire.js它可以根据媒体查询匹配执行 js 代码。

单独测试这些东西有效:

• respond.js 为 IE8 正确执行 css 中定义的媒体查询
• enquire.js 根据匹配 css 的媒体查询正确执行 javascript 代码。 (对于非旧版浏览器)

但是组合似乎不起作用。即:

Enquire.js 不会根据通过 respond.js 启用的媒体查询执行 javascript(对于旧版浏览器)

因为 Respond.js 包含 Paul Irish 的 polyfill for MatchMedia哪个(根据:Enquire's documentation)应该足以支持旧版，我不确定哪里出了问题。

所以只是为了检查一下:这个组合应该有效吗？

Answer 1

我是 enquire 的作者，所以我会尽我所能提供帮助。

我刚刚浏览了 respond.js 源代码以了解它是如何工作的。响应从您的 CSS 中提取任何媒体查询，然后根据窗口的宽度，如果媒体查询匹配，它将创建包含该 CSS 的新样式 block (这就是为什么它只支持简单的媒体查询，例如最大/最小宽度)。这当然意味着它不会帮助查询JS，因为它是模拟媒体查询。

包含 matchMedia polyfill 实际上是转移注意力。所做的只是创建一个等效于 matchMedia 浏览器 API。因此，如果浏览器只支持非常有限的一组媒体查询(如 IE8)，它不会扩展它的功能，它只会让你量力而行。起初我自己犯了这个错误!

我不知道这是否对您有帮助，但是查询的 register 方法可以接受第三个参数，shouldDegrade 这是一个信号，用于查询您打算使用该功能始终运行如果浏览器被认为无能力。因此，如果您传入 true，则匹配功能将始终针对无功能的桌面浏览器执行(同时 仍然有条件的浏览器)。这将使您能够为旧版浏览器提供桌面体验，这在移动优先方法中尤其有用。

如果您有任何问题，我们很乐意为您提供进一步的帮助