JavaScript响应式设计核心是主动感知视口变化并触发适配逻辑，需监听resize事件并防抖处理，配合matchMedia精准匹配CSS媒体查询断点及横竖屏状态。
JavaScript 实现响应式设计，核心不在于“重写布局”，而是**主动感知视口变化，并触发适配逻辑**。监听窗口大小变化是最基础也最关键的一步。
用 resize 事件监听窗口尺寸变化
浏览器的 window 对象支持 resize 事件，只要窗口宽度或高度改变（包括缩放、横竖屏切换、分屏、开发者工具开合等），就会触发。
基础写法：
window.addEventListener('resize', () => {
console.log('当前宽度：', window.innerWidth, '高度：', window.innerHeight);
});
立即学习“Java免费学习笔记（深入）”；
⚠️ 注意：resize 触发非常频繁（拖动窗口时每秒可能几十次），直接在里面执行复杂操作（如重排版、请求数据、操作 DOM）会导致卡顿。
防抖处理 resize 事件（推荐做法）
实际项目中必须加防抖（debounce），让回调只在用户停止调整窗口后才执行一次：
- 定义一个定时器 ID 变量（如
let resizeTimer） - 每次触发
resize时先清除旧定时器 - 再设置新定时器，延迟（如 150ms）后执行真正逻辑
示例代码：
let resizeTimer;
window.addEventListener('resize', () => {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
// ✅ 这里放你的响应式逻辑
handleResponsive();
}, 150);
});
配合 CSS 媒体查询做更精准判断
仅靠 window.innerWidth 有时不够——比如用户缩放页面但没改窗口尺寸，或者用了 zoom。此时可结合 window.matchMedia() 监听 CSS 媒体查询状态：
const mediaQuery = window.matchMedia('(max-width: 768px)');
mediaQuery.addEventListener('change', (e) => {
if (e.matches) {
console.log('进入移动端断点');
} else {
console.log('回到桌面端');
}
});
优点：语义清晰、与 CSS 断点完全一致、支持初始状态检查（mediaQuery.matches 可立即读取）。
补充：横竖屏切换的特殊处理
移动设备旋转时，resize 也会触发，但有时需要区分方向。可用：
-
window.orientation（已废弃，不推荐） - 更可靠方式：
window.matchMedia('(orientation: portrait)')或'(orientation: landscape)' - 或通过宽高比判断：
window.innerWidth > window.innerHeight→ 横屏
建议优先使用 matchMedia，兼容性好且逻辑明确。
