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

Question

看到这个小提琴。

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

当浏览器窗口加载的像素小于等于640px时，背景颜色将设置为红色。（即匹配事件被调用）。但是，当窗口在加载时宽于640px时，什么也不会发生，即不调用unmatch事件。为什么不？如果与条件不匹配，是否有办法强制取消匹配事件？

基本上，我想要的是查询的行为就像一个if-else语句，被立即调用。

Answer 1

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

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

如果最初调用了不匹配，则当查询不匹配时，您必须在不匹配回调中放入逻辑，以检查是否已经发生匹配（或更糟糕的是，但存在这样的逻辑makeStacked）。

如果我们严格遵循渐进增强功能，在您的示例中，默认情况下，我将在CSS中使用背景蓝色，并在match中添加一个类，并在unmatch中删除该类：

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

尽管我假设您的示例是您实际想要的简化版本。因此，另一种方法是使用setup回调掩盖默认情况：

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

如果这更适合您的需要，您也可以使用两个媒体查询。我认为这比使用上面的设置更好地传达了意图。

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

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