监听窗口大小变化 - Javascript

当我们需要在网页中动态地展示数据或元素时，可能需要知道浏览器窗口的大小。为此，Javascript 提供了 window.onresize 事件，用于监听浏览器窗口大小的变化。

使用方法

window.onresize = function() {
  // 处理窗口大小变化后的逻辑
}

当浏览器窗口大小发生变化时，window.onresize 事件会被触发，可以在函数内部处理相应的逻辑。

例如，可以根据窗口大小调整元素的位置、大小等属性，使网页布局适应不同的设备屏幕大小，提高用户体验。

window.onresize = function() {
  var screenWidth = window.innerWidth;
  
  if (screenWidth < 768) {
    // 移动设备
    // 调整元素位置、大小等属性
  } else if (screenWidth >= 768 && screenWidth < 992) {
    // 平板设备
    // 调整元素位置、大小等属性
  } else {
    // PC 设备
    // 调整元素位置、大小等属性
  }
}

注意事项

• window.onresize 事件不是一个实时的事件，而是等用户停止调整窗口大小后才会被触发。因此，在处理大小变化的功能时，需要注意性能问题。
• 由于不同的设备和浏览器，窗口大小的获取方法可能有所不同。因此，在代码中需要进行适当的兼容处理。
• window.onresize 事件有时可能与其他事件发生冲突，需要进行适当的事件管理。
• 如果在应用程序中需要频繁地使用到窗口大小，可以考虑使用第三方库或插件，以简化开发和维护。例如，lodash 库的 _.debounce 方法可以在事件被频繁触发时，限制事件的触发次数，避免影响性能。

参考资料

• Window: resize event

结论

通过监听 window.onresize 事件，可以动态地获取并处理浏览器窗口大小的变化。这种方式可以使网页在不同屏幕上展示更加美观、合理，提高用户的使用体验。但同样需要注意性能问题和兼容性问题。