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

Question

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

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

我想将所有脚本保存在一个文件中,导致http请求数量增加.

这就是我发现的:

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

我的问题是,它们都定义了回调,但在这些情况下我不知道如何绑定或取消任何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

Answer 2

$('#selector').click(function() {
    if (parseInt($(window).width()) < 320) {
        ...
    }
});