Question

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

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

我希望将所有脚本保存在一个文件中，导致http请求的数量。

这就是我发现的：

breakpoint.js - ＆gt;在CSS＆amp;中定义所有断点加倍JS
http://responsejs.com/ - ＆gt;在body data-attr
OnMediaQuery - ＆gt;为断点定义人类可读的名称（恕我直言，更好，因为你没有绑定像素）

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

e.g。我有：

$('#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) {
        ...
    }
});

Answer 3

我搞砸了一些库和东西，最后使用了这种响应式监听器。它使用针对断点的CSS媒体查询和针对节流器的UnderscoreJS。我看到的优点是断点都是在CSS中定义的，而不是围绕各种脚本分段。

在@media上使用:after的CSS body断点示例：

body:after {
    content: 'widescreen';
    display: none;
}
@media screen and (max-width: 1024px){
    body:after {
        content: "extra-large";
    }
}
@media screen and (max-width: 768px){
    body:after {
        content: "large";
    }
}
@media screen and (max-width: 640px){
    body:after {
        content: "medium";
    }
}
@media screen and (max-width: 480px){
    body:after {
        content: "small";
    }
}
@media screen and (max-width: 320px){
    body:after {
        content: "tiny";
    }
}

等待基于body:after内容触发的示例侦听器脚本。正如您所看到的，它在此示例中定义为基于设备通用性的show / hide / move / create小部件的2个范围：

<script type ="text/javascript">
$(window).resize(_.debounce(function(e){
    var size = window.getComputedStyle(document.body,':after').content.replace(/"|'/g, ''),
        mobile = ["tiny", "small", "medium", "large"].indexOf(size),
        desktop = ["extra-large", "widescreen"].indexOf(size);

    $('.placehold').html('computed breakpoint: ' + size + '<br />mobile index = ' + mobile + '<br />desktop index = ' + desktop);

    if (mobile != -1) {
        $('.placehold2').html('mobile range');
    } else if (desktop != -1) {
        $('.placehold2').html('desktop range');
    }
}, 100)).trigger('resize');
</script>

http://jsfiddle.net/Dhaupin/nw7qbdzx/ - 只需调整jsfiddle中的输出窗格即可对其进行测试。

编辑：显然，浏览器通过window.getComputedStyle(document.body,':after').content以不同的方式呈现内容：插入单引号或双引号。添加了一个替换来擦除它们。

Answer 4

如果您使用的是Bootstrap 4，您可以使用此jQuery插件通过检查元素的CSS显示属性来检查设置的断点。

https://jacoblett.github.io/IfBreakpoint/

然后像

一样使用它

if ( xs == true ) { 
  alert("mobile first");
}

// Update on window resize
$( window ).resize( function(){
  $("h2").text( breakpoint ); 
});

Answer 5

如果您的目标是现代浏览器（IE10以上，而不是IE移动设备），那么您应该使用新的window.matchMedia()方法，因为所有各种浏览器之间的差异如何衡量滚动条宽度意味着如果您使用例如window.width()，将会有一小部分像素，其中CSS与JS的行为不同（我发现这很难）。

本文将详细介绍：https://www.fourfront.us/blog/jquery-window-width-and-media-queries

使用类似下面的内容，以便您的JS和CSS在完全相同的断点上工作：

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide, write code specific for that */
} else {
  /* the viewport is less than 400 pixels wide, write code specific for that */
}

Mozilla开发者网络在此处记录了这一点：https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia

Answer 6

您可以尝试我的解决方案：

// Example for your Request
var clickCounter = 0;

$('#selector').click( function() {
    if (ifMaxWidth(320)) {
        console.log('selector clicked #'+ clickCounter++ +" times");
    }
});

// More examples
bpChecks();
$(window).on("orientationchange resize", function(event) { bpChecks(); });

function bpChecks()
{
    ifMinWidth(992, function() {
        console.log("hello from callback 1");
    });
    
    ifMaxWidth(1199, function() {
        console.log("hello from callback 2");
    });
    
    ifBetweenMinAndMaxWidth(992, 1199, function() {
        console.log("hello from callback 3");
    });
}


// Methods
function ifBetweenMinAndMaxWidth(minWidth, maxWidth, callback)
{
    var w = $(window).width();

    var result = w < maxWidth && w > minWidth;
    if (result) {
        console.log("width ("+ w +") is between "+ minWidth + " and " + maxWidth);
        if (callback !== undefined) { callback(); }
    } else {
        console.log("width ("+ w +") is NOT between "+ minWidth + " and " + maxWidth);
    }
    return result;
}

function ifMinWidth(minWidth, callback)
{
    var w = $(window).width();

    var result = w > minWidth;
    if (result) {
        console.log("width ("+ w +") is greater than "+ minWidth);
        if (callback !== undefined) { callback(); }
    } else {
        console.log("width ("+ w +") is NOT greater than "+ minWidth);
    }
    return result;
};

function ifMaxWidth(maxWidth, callback)
{
    var w = $(window).width();

    var result = w < maxWidth;
    if (result) {
        console.log("width ("+ w +") is smaller than "+ maxWidth);
        if (callback !== undefined) { callback(); }
    } else {
        console.log("width ("+ w +") is NOT smaller than "+ maxWidth);
    }
    return result;
};

#selector { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  align-content: center;
  background: blue; 
  width: 250px; 
  height: 250px; 
}
#selector:hover { cursor:pointer; }
#selector p { color: white; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="selector">
    <p>Click me</p>
</div>

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

6 个答案: