Question

请参阅此fiddle。

enquire.register("screen and (max-width: 640px)", {
    match: function () {
        $("body").css("background","red");
    },
    unmatch: function () {
        $("body").css("background","blue");
    }
});

当浏览器窗口为640px或更低加载时，背景颜色将设置为红色。（即调用匹配事件）。但是，当窗口宽度超过640px时，没有任何反应，即不调用不匹配事件。为什么不？如果与条件不匹配，是否有办法强制取消匹配事件？

基本上我想要的是查询表现为一个立即调用的if-else语句。

Answer 1

当我设计enquire.js时，它打算用于移动优先RWD。因此，它假设您采取渐进增强方法。也就是说，当查询匹配时调用匹配，并且仅当匹配已经发生一次（并且查询不再匹配）时才调用unmatch。这可能看起来很奇怪，但常见的用例是＃34;当这个查询匹配时执行某些操作，当它不再匹配时撤消它＆＃34;。一个示例可能是将元素转换为较大屏幕上的选项卡区域，否则返回堆叠元素：

enquire.register(desktopMediaQuery, {
  match : function() { 
    makeTabs(someElement);
  },
  unmatch : function() {
    makeStacked(someElement);
  }
};

如果最初调用unmatch，当查询不匹配时，您必须在不匹配的回调中放置逻辑以检查是否已经发生匹配（或者更糟，但{ {1}}）。

如果我们要严格遵循渐进增强，在您的示例中，我将在CSS中默认为背景蓝色，并在匹配中添加一个类，并在unmatch中删除该类：

makeStacked

虽然我认为你的例子是你真正想要的简化版本。所以另一种方法是使用安装回调来掩盖默认情况：

enquire.register("screen and (max-width: 640px)", {
    match: function () {
        $("body").addClass("red-bg");
    },
    unmatch: function () {
        $("body").removeClass("red-bg");
    }
});

如果这更适合您需要做的事情，您还可以使用两个媒体查询。我认为这比使用上面的设置更能表达意图。

enquire.register("(max-width: 640px)", {
    setup : function() {
        $("body").css("background","blue");
    },
    match : function() {
        $("body").css("background","red");
    },
    unmatch : function() {
        $("body").css("background","blue");
    }
});

这是展示两种方法的小提琴：http://jsfiddle.net/7Pd3m/

Answer 2

在调用寄存器处理程序时，查询js在寄存器函数内部提供了一个名为 setup 的方法，该方法被触发一次（没有检测到任何媒体查询）。因此，您可以扩展代码以包含它：

enquire.register("screen and (max-width: 640px)", {
    setup: function() {
     // do stuff here as soon as register is called.
    },
    match: function () {
        $("body").css("background","red");
    },
    unmatch: function () {
        $("body").css("background","blue");
    }
});

（参考他们的文档http://wicky.nillia.ms/enquire.js/#quick-start）

Enquire.js - 加载时不匹配事件

2 个答案: