如何在浏览器重新resize时最有效地检查某些“断点”？
我正在玩一些定义了两个断点的响应式设计：
Mobile > max-width 320px Tablet portrait > max-width 767px 在桌面上我有很多动画+高级function正在使用Javascript。 在移动设备和平板电脑上我希望简化和禁用一些JS +“重建”一些DOM元素。
我想知道确定某些断点（宽度方面）的最有效方法是什么？ 我在这里思考很多关于表现的事情。
我知道我可以通过以下方式检查窗口宽度：
$( window ).resize(function() { if ($(window).width() > 320 && $(window).width() 401 && $(window).width() 769) { //desktop } });
但这似乎是一个非常“昂贵”的行动？
任何可以用于此的轻量级库的建议也是非常受欢迎的！
我经常遇到这个问题而没有找到完美的解决方案。 但是，有一种解决方法似乎不那么耗费资源。 通过在resize()函数内使用超时并不断清除它，可以确保只在视口停止resize时才运行代码。
var resizeTimer, width; var mobile = tablet = desktop = false; $(window).resize(function() { // clear the timeout clearTimeout(resizeTimer); // execute breakpointChange() once the viewport // has stopped changing in size for 400ms resizeTimer = setTimeout(breakpointChange(), 400); }); function breakpointChange() { // use vanillajs window.innerWidth // instead of jQuery $(window).width() as suggested by simon width = window.innerWidth; if (!mobile && width < 400) { tablet = desktop = false; mobile = true; console.log('is mobile'); } if (!tablet && width > 401 && width < 768) { mobile = desktop = false; tablet = true; console.log('is tablet'); } if (!desktop && width > 769) { mobile = tablet = false; desktop = true; console.log('is desktop'); } } $(window).resize();
这肯定不是最好的，但它会阻止你的代码不断运行。 随意添加到我的答案和/或纠正我。 这是一个小提琴
当它在过时的情况下停止使用jQuery时，它会非常高效。 JavaScript window对象具有innerWidth / outerWidth属性，您可以在不使用jQuery调用的情况下使用该属性。
$( window ).resize(function() { var width = window.innerWidth; // eg if (width > 320 && width < 400) { //mobile } });
所以你没有任何性能问题，因为这只是一个对象的属性而没有函数调用/强制。 如果您确实需要了解该设备，那么这将是一个完美的解决方案。
当您使用DOM操作时 - 查看“The F”提出的超时