引导:响应式设计-当窗口大小从980px调整到979px时执行JS

Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px

本文关键字：调整 980px 979px JS 执行 窗口大小 响应 引导      更新时间：2023-09-26

我正在使用上一个Twitter的Bootstrap。当我的窗口宽度低于980px（正如你所知，在这个尺寸上，Bootstrap修改Navbar并隐藏标准菜单项）时，我想执行某个JS函数（显示工具提示一次）——简而言之，窗口从768到979。我知道

@media (min-width: 768px) and (max-width: 979px) {...}

此选项可用于捕获事件。然而，它可能只用于更改退出样式，如

body {background-color:#ccc;}

我需要启动JS函数，或者为元素添加或删除特定的样式。我试过：

<script>
  window.onresize = function () {
      if (window.outerWidth == 980) {alert('');}
  };
</script>

但是这个解决方案太慢了，甚至挂起了一个浏览器窗口。所以，当窗口从GREATER端调整到979px并执行JS函数时，有什么解决方案可以捕捉到这个事件吗？

感谢大家！

outerWidth是一个方法，因此您缺少():

if (window.outerWidth() == 980)

在任何情况下，如果您使用的是jQuery:

$(window).resize(function() {
  if ($(this).width() < 981) {
    //do something
  }
});
相关文章：