必须绑定到 window 且加防抖：html 规范仅允许 window 触发 resize，body.onresize 被现代浏览器忽略；resize 频繁触发需防抖（200–250ms）并配合 requestanimationframe；应读 window.innerwidth（与 css 媒体查询一致），首次加载须手动调用处理函数。
不能在 里写，也不能用 document.body.onresize，现代浏览器直接忽略——必须绑定到 window，且不加防抖、不补首次调用、乱选尺寸属性，90% 的响应式逻辑会出错。
为什么 body.onresize 不生效
HTML 规范只允许 window 对象原生触发 resize 事件。 或 document.body.onresize = handler 在 Chrome/Firefox/Safari 中完全被忽略；所谓“偶尔能跑”，其实是事件从 window 冒泡上来被误判了。IE 旧版曾支持，但早已废弃，不可依赖。
window.addEventListener('resize', ...) 必须加防抖
拖拽窗口边框时，resize 在 Chrome 下可能每 1–2ms 触发一次，连续几十次回调若含 DOM 操作或计算，CPU 会瞬间拉满，页面卡死。
- 防抖延迟设为
200–250ms是实测平衡点：短于150ms容易漏判，长于300ms用户能感知延迟 - 别用
setTimeout简单包一层就完事——要配合requestAnimationFrame把 DOM 更新推到渲染帧，避免强制同步回流 - 多个模块共用 resize？统一注册一个监听器，内部用发布-订阅分发，别各自
addEventListener
该读 window.innerWidth 还是 document.documentElement.clientWidth
绝大多数响应式场景（比如匹配 @media (max-width: 768px)）必须用 window.innerWidth：
-
window.innerWidth包含垂直滚动条宽度，和 CSS 媒体查询的判定逻辑完全一致 -
document.documentElement.clientWidth排除滚动条，值通常小12–17px，在 macOS 或“始终显示滚动条”系统下直接错位 -
document.body.clientWidth危险：受 margin/padding/border 影响，无 DOCTYPE 时可能返回0，绝对不要用 - 移动端软键盘弹出时，
window.innerWidth会真实缩小，clientWidth可能不变——这时只有前者能反映可用空间
首次加载必须手动调用一次处理函数
resize 事件只在“尺寸变化后”触发，页面一打开时不会自动执行。如果你靠窗口宽度决定是否加 mobile 类、初始化图表画布、设置广告位高度，漏掉这步就会白屏、错位或功能失效。
- 写法是：
window.addEventListener('resize', handleResize); handleResize(); - 别在
DOMContentLoaded里取尺寸——此时 CSS 可能未加载完成，innerWidth虽准，但元素渲染尺寸不准 - 如果逻辑依赖某个 DOM 元素（如
document.getElementById('chart')），先加if (el) { ... }守卫，避免Cannot read property 'xxx' of null
真正容易被忽略的是：resize 触发不等于布局已完成。横竖屏切换、软键盘弹起等场景下，视口尺寸可能先变、DOM 渲染滞后，直接改样式或重绘极易出竞态。这时候得靠 requestAnimationFrame 或 ResizeObserver（针对容器自身尺寸变化）来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
