JavaScript响应式核心是感知视口变化并动态调整状态，配合CSS媒体查询；推荐用matchMedia精准监听断点、ResizeObserver监听元素尺寸，resize事件需节流处理。
JavaScript 实现响应式布局，核心不在于“自己写布局”，而在于感知视口变化、动态调整行为或状态，配合 CSS 媒体查询（Media Queries）协同工作。监听窗口大小变化是其中关键一环，但需注意性能和触发时机。
用 resize 事件监听窗口尺寸变化
最直接的方式是监听 window 的 resize 事件：
window.addEventListener('resize', () => {
console.log('窗口宽：', window.innerWidth, '高：', window.innerHeight);
});
⚠️ 注意：resize 触发非常频繁（拖拽窗口时可能每秒数十次），直接在回调里执行重绘、计算或 DOM 操作易导致卡顿。
推荐做法是节流（throttle）处理：
立即学习“Java免费学习笔记（深入）”；
- 使用
setTimeout+ 标志位实现简易节流（如 150ms 内只执行一次） - 现代项目可引入
lodash.throttle或用requestAnimationFrame优化（适合需同步视觉更新的场景）
响应式逻辑应优先交给 CSS，JS 只做“补位”
CSS 媒体查询（@media）是响应式的基石，JS 不该重复实现断点布局。JS 的典型补充场景包括：
- 根据屏幕宽度加载/卸载第三方组件（如移动端用滑动轮播，桌面端用网格展示）
- 动态设置 Canvas 尺寸或 WebGL 渲染分辨率
- 在 JS 中读取当前断点（例如判断是否进入“移动模式”后初始化触摸事件）
- 配合
matchMedia()主动查询媒体状态，比监听 resize 更精准
用 matchMedia() 精准监听特定断点
比无差别监听 resize 更高效、语义更清晰：
const mediaQuery = window.matchMedia('(max-width: 768px)');
function handleMobileChange(e) {
if (e.matches) {
console.log('进入移动端视图');
initTouchControls();
} else {
console.log('退出移动端视图');
destroyTouchControls();
}
}
mediaQuery.addListener(handleMobileChange); // 旧 API（仍广泛支持）
// 或用新版：mediaQuery.addEventListener('change', handleMobileChange);
✅ 优势：
- 只在匹配状态切换时触发（如 769px → 768px），避免 resize 的高频干扰
- 可立即获取当前状态：
mediaQuery.matches - 支持任意 CSS 媒体查询字符串（如
(prefers-reduced-motion: reduce)）
补充技巧：监听元素尺寸变化（非窗口）
若需响应某个容器（如侧边栏折叠）的尺寸变化，resize 事件不适用（仅对 window 有效）。可用：
- ResizeObserver：现代标准 API，监听任意元素宽高变化，性能好、兼容性已覆盖主流浏览器（Chrome 64+、Firefox 69+、Safari 13.1+）
- 降级方案：定时轮询
offsetWidth/Height（不推荐，仅作兜底）
示例：
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('元素新尺寸：', entry.contentRect.width, entry.contentRect.height);
}
});
observer.observe(document.getElementById('main-panel'));
响应式布局的 JavaScript 部分，重在“感知”与“协作”，而非“接管”。合理使用 matchMedia 和 ResizeObserver，配合节流的 resize，就能让交互逻辑自然跟随视口变化，不卡顿、不失控。
