如何实现javascript响应式设计_如何监听窗口大小变化

JavaScript响应式设计需结合resize节流与matchMedia：先用throttle控制resize高频触发，再用matchMedia精准监听断点变化，并在初始化和卸载时分别执行与清理。

JavaScript 响应式设计的核心不是仅靠 CSS 媒体查询，而是让 JS 行为能随视口尺寸动态调整。监听窗口大小变化是其中最基础也最关键的一步。

使用 resize 事件监听窗口尺寸变化

浏览器的 window 对象提供 resize 事件，只要用户改变浏览器窗口宽度或高度，就会触发：

• 直接绑定：window.addEventListener('resize', handler)
• 注意：该事件会高频触发（拖拽窗口时每秒可能几十次），不加节流易导致性能问题
• 简单示例：

function handleResize() {
  console.log('当前宽度：', window.innerWidth);
}
window.addEventListener('resize', handleResize);

务必添加节流（throttle）避免性能损耗

频繁执行重计算、DOM 操作或请求时，不节流会导致卡顿甚至页面崩溃：

• 推荐使用固定间隔限制执行频率（如 150ms 内最多执行一次）
• 可手写简易节流函数，也可用 Lodash 的 throttle 或现代浏览器的 requestAnimationFrame 方案
• 轻量节流示例：

function throttle(fn, delay) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last > delay) {
      fn.apply(this, args);
      last = now;
    }
  };
}
<p>const throttledResize = throttle(() => {
if (window.innerWidth < 768) {
document.body.classList.add('mobile');
} else {
document.body.classList.remove('mobile');
}
}, 150);</p><p>window.addEventListener('resize', throttledResize);

立即学习“Java免费学习笔记（深入）”；

标签： css javascript java js 浏览器 app ssl win 响应式设计 重绘