互操作性: Enquire.js不执行Respond.js激发的css媒体查询

Question

好的，所以我使用Respond.js --传统浏览器上的介质填充(ie8是最重要的)。

同时，我正在研究如何使用Enquire.js，它允许基于媒体查询匹配执行js代码。

在隔离测试下，这种材料起作用：

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

然而，这种组合似乎不起作用。即：

Enquire.js不执行基于媒体查询的javascript，该查询通过respond.js (用于旧版浏览器)启用。

由于Respond.js包含Paul爱尔兰语的MatchMedia用聚脂填料 (如：查询文件)，对于遗留支持来说应该足够了，所以我不确定会有什么问题。

所以我只是想检查一下:这个组合应该有效，对吧？

Answer 1

我是“查询”的作者，所以我会尽我所能帮助你。

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

包括matchMedia填充实际上是一种红鲱鱼。所做的就是创建一个与matchMedia浏览器API等价的工具。因此，如果浏览器只支持非常有限的媒体查询集(就像IE8那样)，它将不会扩展它的功能，它只允许您在它的能力范围内工作。一开始我自己犯了这个错误！

我不知道这是否会对您有所帮助，但是enquire的register方法可以接受第三个参数，即shouldDegrade，它是一个信号，用于询问如果浏览器被认为无法运行，您打算始终运行该功能。因此，如果您传入true，匹配函数将始终在没有能力的桌面浏览器上执行(而对于有能力的浏览器仍然是有条件的)。这将允许您向旧浏览器提供桌面体验，特别是在移动第一方法中非常有用。

如果你还有其他问题，很乐意提供进一步帮助。

Answer 2

尝试从matchMedia中删除respond.js的包含，然后在respond.js之后加载match.media和enquire.js。曾为我在IE 7和8与查询v2.0.2。

Answer 3

我找到了一个似乎适用于IE8的解决方案

1.非常重要！如果您使用match.media，则从响应JS中删除它(如果不使用，它将在IE中静默失败)

2.包含具有至少中介测试、加载、shiv：http://modernizr.com/download/#-shiv-mq-cssclasses-teststyles-load的现代派

3.在< head >中(因为我们需要头中的响应)

<script src="../../common/vendor/modernizr/modernizr.custom.js"></script>
<script>
    Modernizr.load([
        // Test need for CSS media query polyfill
        {
            test: Modernizr.mq("only all"),
            nope: "../../common/vendor/respond/respond.min.js"
        }
    ]);
</script>

4.在< /body >标签之前加载多填充和脚本

<script>
    Modernizr.load([
        {
            test: window.matchMedia,
            nope: [
                "../../common/vendor/polyfills/media.match.js",
                "../../common/vendor/polyfills/matchMedia.addListener.js"
            ]
        },
        '../../common/vendor/enquire/enquire.min.js',
        '../../common/scripts/script.js'
    ]);
</script>

我希望它会对你有用！