监听窗口尺寸变化应优先使用 matchMedia 而非 resize 事件，因其语义清晰、性能更优且与 CSS 断点对齐；若必须用 resize，须配合节流（100–250ms）或 requestAnimationFrame，并避免强制同步布局；注意 iOS Safari 兼容性及 visualViewport 的实际视口适配；SPA 中务必清理监听器防泄漏。
用 window.addEventListener('resize') 监听窗口尺寸变化
直接绑定 resize 事件是最常用方式，但要注意它会高频触发（尤其拖拽窗口时），不加节流容易卡顿。
实际使用中必须配合防抖或节流逻辑，比如用 setTimeout 延迟执行，或用 requestAnimationFrame 对齐渲染帧。
常见错误：直接在事件回调里调用重排版操作（如读取 offsetWidth、修改 style），导致强制同步布局，性能骤降。
- 推荐节流间隔设为 100–250ms，兼顾响应性和性能
- 若只关心断点切换（如从桌面切到移动端），优先用
matchMedia，而非监听 resize - 注意：Safari 在 iOS 上可能不触发某些 resize 场景（如地址栏收起），需额外检测
orientationchange
用 matchMedia 响应 CSS 媒体查询断点
matchMedia 是更语义化、性能更好的方案，它把响应式逻辑和 CSS 断点对齐，避免手动计算像素值。
例如监听 (max-width: 768px) 是否匹配，比在 resize 里反复比对 window.innerWidth 更可靠、更易维护。
典型误用：只调用一次 matchMedia(...).matches 获取快照，没监听变化。正确做法是调用 addEventListener('change', handler)（现代浏览器）或使用 addListener（旧版 Safari）。
立即学习“Java免费学习笔记（深入）”；
- 支持多个断点，可复用同一
MediaQueryList实例 - 返回的
mql.matches是实时布尔值，可直接用于条件渲染 - 务必在组件卸载或销毁时调用
mql.removeEventListener('change', handler)，防止内存泄漏
结合 CSS @media 与 JS 的边界场景处理
纯 CSS 媒体查询无法覆盖所有交互需求：比如需要根据视口宽高比动态加载不同分辨率图片、或在断点切换时触发动画、或读取元素实际渲染尺寸后调整布局。
这时 JS 不是替代 CSS 响应式，而是补足其能力边界。
容易忽略的兼容点：window.visualViewport 在移动端（尤其是 iOS Safari）影响实际可用视口尺寸，window.innerWidth 可能包含缩放或地址栏遮挡，而 visualViewport.width 更接近用户真正看到的区域。
- 做横竖屏适配时，优先用
screen.orientation+orientationchange，比仅依赖 width/height 更准确 - 涉及 canvas 或 WebGL 渲染时，必须监听
visualViewport的resize事件，否则缩放后画布会模糊 - 服务端渲染（SSR）场景下，首次 JS 执行前无 window 对象，需确保逻辑有 fallback 或延迟初始化
避免重复监听和内存泄漏的关键点
在单页应用（SPA）中，组件频繁挂载/卸载时，如果每次都在 useEffect（React）或 mounted（Vue）里添加 resize/matchMedia 监听，但没清理，会导致监听器堆积、DOM 引用残留、甚至跨组件状态污染。
最简验证方式：打开 DevTools → Performance 面板录制操作，观察事件监听器数量是否随路由跳转持续增长。
- React 中用
useEffect返回清理函数，Vue 中用onBeforeUnmount - 给
resize绑定的函数建议用useCallback缓存，避免每次重绑 - 全局监听（如主题切换依赖视口）应封装成独立 hook 或 service，统一管理生命周期
