ResizeObserver 不是 window.resize 的平替，只能观察已挂载的 Element 实例，响应其 content-box 尺寸变化；需在 DOM 就绪后监听容器、用 class 切换布局、手动处理 padding 影响，并及时 disconnect 防泄漏。
ResizeObserver 不是 window.resize 的平替，别往 body 上瞎 observe
直接对 document.body 或 window 调用 observe() 会立刻抛出错误：Failed to execute 'observe' on 'ResizeObserver': The target must be an instance of Element。ResizeObserver 只接受单个已挂载的 Element 实例，且必须是 content-box 尺寸真实可变的容器（比如带 flex、grid 或 width: 100% 的 div）。它不响应视口缩放，也不管你滚动或缩放页面——只盯住那个你传进去的 DOM 节点的 contentRect.width/height 是否因 layout 重排而变了。
流式布局适配的关键：监听「内容区容器」而非「视口」
多端预览（如手机竖屏/横屏、平板分栏、桌面缩放）真正影响布局的是容器内部可用空间，不是屏幕宽度。比如一个 .preview-container 在 flex 布局中随父级收缩，它的 contentRect.width 才是你该响应的信号：
- 用
querySelector精准获取运行容器节点，避免getElementById('preview')返回null（DOM 未就绪时静默失败，但传null会直接报错） - 在
DOMContentLoaded或框架生命周期钩子（如 React 的useEffect、Vue 的mounted）中调用observe() - 回调里别直接改
style.width，否则可能触发新一轮 layout，导致无限回调；优先用classList.toggle()切换预设 CSS 类
const container = document.querySelector('.preview-container');
if (container) {
const ro = new ResizeObserver(entries => {
const { width } = entries[0].contentRect;
container.classList.toggle('mobile-layout', width < 480);
container.classList.toggle('tablet-layout', width >= 480 && width < 960);
container.classList.toggle('desktop-layout', width >= 960);
});
ro.observe(container);
}
多端预览常见翻车点：padding/border 变了但没触发回调
你加了 padding: 16px，发现布局没重算？正常。ResizeObserver 只认 content-box 尺寸变化，也就是 width 和 height 的实际值。以下操作不会触发回调：
-
border: 2px solid #000→ content area 不变 -
transform: scale(0.9)→ layout 尺寸没动 -
visibility: hidden→ 元素仍占 layout 空间
要让 padding 影响回调，得让它挤占 content 区域：比如把 box-sizing: border-box 改成 content-box，再加 padding，此时 contentRect.width 才会缩小。否则，老老实实用 getComputedStyle(el).paddingLeft 手动计算总宽。
立即学习“前端免费学习笔记（深入）”；
卸载时必须 disconnect，否则预览页切走就内存泄漏
在 SPA 多端预览场景下（比如从「手机预览」tab 切到「代码编辑」tab），如果没清理 ResizeObserver 实例，它会继续持有对已销毁 DOM 节点的引用，并在下次尺寸变化时尝试读取 entry.contentRect，抛出 Cannot read property 'contentRect' of null。React 中务必写：
useEffect(() => {
const ro = new ResizeObserver(...);
ro.observe(container);
return () => ro.disconnect(); // 不是 unobserve()，是彻底断开
}, []);
真正容易被忽略的是：同一个 ResizeObserver 实例可观察多个元素，但一旦 disconnect()，所有观察都停了——如果你有多个预览容器，要么分开实例，要么用 unobserve() 精确移除单个目标。
