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

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

什么是最方便和通用的解决方案，你建议为每个断点实现不同的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) { ... } }); 

Answer 3

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

示例CSS @media断点使用:after 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内容触发的示例侦听器脚本body:after 。 正如您所看到的，它在此示例中定义为基于设备通用性的show / hide / move / create小部件的2个范围：

http://jsfiddle.net/Dhaupin/nw7qbdzx/ – 只需调整jsfiddle中的输出窗格即可测试它。

编辑：显然浏览器通过window.getComputedStyle(document.body,':after').content呈现内容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