JavaScript不直接实现响应式布局，仅在必要时辅助响应行为；需监听窗口变化的典型场景包括数据重载、第三方组件resize调用、断点感知功能开关，且应使用节流避免卡顿。
JavaScript 本身不直接实现响应式布局——那是 CSS 媒体查询（@media）和弹性/网格布局（flexbox、grid）的职责。JS 只在必要时辅助响应行为，比如监听尺寸变化、动态加载资源、或修复某些 CSS 无法覆盖的交互逻辑。
什么时候真得用 JS 监听窗口大小变化
多数响应式场景完全不需要 JS。但以下情况例外：
- 需要在
window.innerWidth变化时触发数据重载（如从「列表页」切到「卡片页」后重新拉取不同尺寸的图片 URL） - 第三方组件（如某些图表库）未响应 CSS 容器尺寸，必须手动调用其
resize()方法 - 实现「断点感知」的 JS 功能开关（例如：小屏隐藏侧边导航，同时停用其 hover 事件监听器）
别用 window.onresize 直接绑函数——它高频触发易卡顿。改用节流：
function throttle(fn, delay) {
let locked = false;
return () => {
if (locked) return;
locked = true;
fn();
setTimeout(() => locked = false, delay);
};
}
window.addEventListener('resize', throttle(() => {
if (window.innerWidth < 768) {
document.body.classList.add('mobile');
} else {
document.body.classList.remove('mobile');
}
}, 150));
用 matchMedia() 替代反复读取 window.innerWidth
它更精准、可监听、且与 CSS 媒体查询逻辑一致，避免硬编码像素值导致维护脱节。
立即学习“Java免费学习笔记（深入）”；
- 检查当前是否匹配某断点：
matchMedia('(max-width: 768px)').matches - 监听断点切换：
matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', handler) - 多个断点建议封装成对象，避免散落各处：
const breakpoints = { mobile: window.matchMedia('(max-width: 767px)'), tablet: window.matchMedia('(min-width: 768px) and (max-width: 1023px)') }
注意：IE 不支持 addEventListener 在 MediaQueryList 上，需回退用 .addListener()（已废弃但兼容性好）。
响应式图片加载不该靠 JS 拼字符串
别手写 document.getElementById('img').src = 'img@' + window.innerWidth + '.jpg'——这既慢又错失浏览器原生优化。
- 优先用 HTML 的
<picture>+<source media>或<img srcset>，由浏览器自主选择最适配资源 - 若需 JS 控制（如懒加载后根据容器宽度选图），读取的是元素的
offsetWidth，不是window.innerWidth（容器可能有 padding/margin，且响应式常基于容器而非视口） - 动态设置
srcset时，确保包含w描述符（如"small.jpg 480w, medium.jpg 768w"），否则浏览器无法计算密度
真正难的不是监听尺寸，而是判断「该响应什么」：是重排内容结构？还是仅调整间距？或是彻底切换交互模式？这些决策藏在产品逻辑里，JS 只是执行者。写太多尺寸判断代码，往往说明 CSS 层面没理清语义与容器关系。
