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

紅蓮之龍 2025-12-21 00:00:00 次阅读

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;
    }
  };
}
const throttledResize = throttle(() => {
if (window.innerWidth < 768) {
document.body.classList.add('mobile');
} else {
document.body.classList.remove('mobile');
}
}, 150);
window.addEventListener('resize', throttledResize);

配合 matchMedia 实现更精准的断点响应

matchMedia 允许 JS 直接读取 CSS 媒体查询状态，比单纯监听 resize 更语义化、更可靠：

支持监听媒体查询变化（如 (max-width: 767px)），自动回调
首次调用即返回当前匹配状态，无需手动判断 innerWidth
适合与 CSS 断点保持完全一致的逻辑分支
示例：

const mediaQuery = window.matchMedia('(max-width: 767px)');
function onMobileChange(e) {
if (e.matches) {
console.log('进入移动端视图');
} else {
console.log('退出移动端视图');
}
}
// 立即执行一次
onMobileChange(mediaQuery);
// 监听变化
mediaQuery.addListener(onMobileChange); // 旧 API
// 或推荐用 modern 方式：
// mediaQuery.addEventListener('change', onMobileChange);