10

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

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

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

这就是我发现的：

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

例如我有：

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

但这只有在最大宽度为 320 像素时才会发生。在屏幕尺寸高于该点击应返回 false 或执行任何其他操作

目前，我不知道如何做到这一点。

4

6 回答 6

17

您可以在 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
于 2012-07-08T23:19:26.927 回答
12 
$('#selector').click(function() {
    if (parseInt($(window).width()) < 320) {
        ...
    }
});
于 2012-07-08T23:20:05.367 回答
1

我弄乱了一些库和东西，最终使用了这种响应式侦听器。它使用 CSS 媒体查询作为断点，使用 UnderscoreJS 作为节流器。我看到的优点是断点都是在 CSS 中定义的，而不是分散在各种脚本周围。

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

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. 如您所见，在此示例中它被定义为 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 中的输出窗格大小即可对其进行测试。

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

于 2015-06-26T19:17:27.343 回答
1

如果您的目标是现代浏览器（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

于 2017-03-19T23:34:24.110 回答
1

如果您使用的是 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 ); 
});
于 2017-04-26T10:03:52.693 回答
0

你可以试试我的解决方案：

// 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>

于 2020-02-10T12:36:14.350 回答