jquery - 如何在响应式设计中调用不同的jquery操作

Question

我正在将我的项目转换为响应式设计。

您建议为每个断点实现不同的 jQuery block 的最方便和通用的解决方案是什么？

由于 http 请求的数量，我想将所有脚本保留在一个文件中。

这就是我发现的:

• breakpoint.js -> 在 CSS 和 JS 中双倍定义所有断点
• http://responsejs.com/ -> 在 body data-attr 中定义断点
• OnMediaQuery -> 为断点定义人类可读的名称(恕我直言，更好，因为你不受像素的约束)

我的问题是，它们都定义了回调，但我不知道在这些情况下如何绑定(bind)或取消任何 jQuery 事件监听器。

例如我有:

$('#selector').click( function() {
    alert('selector clicked');
});

但只有在最大宽度为 320px 时才会发生这种情况。 在上述屏幕尺寸中，单击应返回 false 或执行任何其他操作

目前，我不知道如何实现这一点。

Answer 1

您可以在 JS 中创建自己的断点。像这样的东西。根据您的需要进行调整。

var isBreakPoint = function (bp) {
    var bps = [320, 480, 768, 1024],
        w = $(window).width(),
        min, max
    for (var i = 0, l = bps.length; i < l; i++) {
      if (bps[i] === bp) {
        min = bps[i-1] || 0
        max = bps[i]
        break
      }
    }
    return w > min && w <= max
}

// Usage
if (isBreakPoint(480)) { ... } // Breakpoint between 320 and 480