body.onresize无效，必须用window.addEventListener('resize')并加防抖、手动调用、读window.innerWidth；Vue/React需显式增删监听；侧边栏等局部变化应改用ResizeObserver。
body.onresize 属性根本不会触发
现代浏览器（Chrome、Firefox、Safari）完全忽略 body.onresize，包括 <body onresize="..."> 写法。这不是兼容性问题，而是 HTML 规范明确限定：只有 window 对象能原生触发 resize 事件。body 上的监听器永远不会执行——所谓“偶尔看到效果”，其实是事件从 window 冒泡上来被误捕获了。
window.addEventListener('resize', ...) 是唯一可靠写法
必须绑定到 window，且需同时满足三个条件才真正可用：
- 加防抖：拖拽窗口时
resize每秒可触发数十次，直接执行逻辑会导致 CPU 拉满、页面卡死；推荐用setTimeout+requestAnimationFrame组合，延迟 200–250ms 后更新 - 首次手动调用：事件只在尺寸“变化后”触发，页面加载完成时不会自动执行；漏掉这步，
mobile类不加、图表画布不初始化、广告位高度为 0，结果就是白屏或错位 - 读
window.innerWidth：它和 CSS 媒体查询（如@media (max-width: 768px)）判定逻辑一致；document.body.clientWidth受 margin/padding 影响，document.documentElement.clientWidth排除滚动条，在 macOS 或“始终显示滚动条”系统下会偏差 12–17px
Vue/React 项目里别裸用 window.onresize = handler
直接赋值 window.onresize = handler 是危险操作：
- 会覆盖其他模块设置的同名 handler，比如轮播图、图表库、UI 组件都可能自己绑 resize
- 组件卸载时不会自动清理，导致内存泄漏和重复执行
- 在 Vue 的
mounted或 React 的useEffect中用addEventListener，并在销毁钩子中显式removeEventListener - 多个组件共用尺寸数据时，统一监听一次，把
window.innerWidth存入 Pinia / Context，各组件只订阅，不各自监听
什么时候该换 ResizeObserver
resize 事件只响应整个窗口尺寸变化，对以下场景完全无效：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏折叠/展开
- 卡片内容动态增加撑高容器
- Tabs 切换后右侧面板高度变化
- flex/grid 重排引起的内部元素尺寸变更
这些得用 ResizeObserver，但它只监听 content-box 宽高变化，且必须确保目标元素已挂载 DOM 才能生效；在回调里直接改 target.style 会触发无限循环，安全做法是只读尺寸、设 CSS 变量或更新兄弟元素。
