gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 22:23:42 24 4
gpt4 key购买 nike

好的,所以我使用 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)应该足以支持旧版,我不确定哪里出了问题。

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

最佳答案

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

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

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

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

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

关于media-queries - 互操作性 : Enquire. js 不执行 Respond.js 触发的 css 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13287755/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com