能，ResizeObserver监听容器content-box的width变化，如flex重排、内容撑开等触发layout的变更，但不响应transform、padding或display:none等非content-area变化。
ResizeObserver 能监听容器宽度变化吗
能，但必须明确：它监听的是元素 content-box 的 width 变化，不是“视觉宽度”或“可见区域”。只要父容器 flex 分配、grid 重排、max-width 生效、内容增删撑开等导致 layout 重排，contentRect.width 就会更新。transform: scale()、padding 变更、overflow: hidden 截断，这些都不触发。
常见误判场景：
- 用 window.addEventListener('resize', ...) 去判断某个卡片变宽了 → 根本不会触发
- 监听图表 canvas 元素本身 → 应监听它的直接包裹 <div id="chart-container">
- 容器初始为 display: none 或未挂载到 DOM → observe() 静默失败，无报错也无回调
监听宽度后切换布局的典型写法
核心逻辑是：在回调中读 entry.contentRect.width，然后按阈值修改 class 或内联样式。
注意不要在回调里同步调用 observer.observe() 或 unobserve()，否则可能漏触发。
推荐结构：
- 用 classList.toggle() 控制响应式类名，比反复写 style.width 更可维护
- 阈值建议用固定像素（如 600），避免依赖 em/rem 换算带来的不确定性
- 若需同时响应宽高，优先用 width 判断布局模式，height 通常只用于适配图表重绘等次要逻辑
const container = document.querySelector('.dashboard-panel');
const ro = new ResizeObserver(entries => {
const width = entries[0].contentRect.width;
container.classList.toggle('compact-layout', width <= 600);
container.classList.toggle('wide-layout', width > 600);
});
ro.observe(container);
React/Vue 中容易漏掉的清理动作
组件卸载时若不清理 ResizeObserver，会导致内存泄漏和旧回调继续执行（比如已销毁的图表还被调用 resize()）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
必须做两件事：
- 在组件 unmount / beforeUnmount 阶段调用 ro.unobserve(element) 或 ro.disconnect()
- 确保 element 仍存在于 DOM 中再调用 unobserve()；如果元素已被移除，直接 disconnect() 更安全
- 不要复用同一个 ResizeObserver 实例监听多个生命周期不一致的组件，每个组件配独立实例更可控
为什么不能只靠 CSS 媒体查询
CSS 媒体查询只能监听 viewport 或 screen，无法感知某个子容器因 flex 增长、Tabs 切换、侧边栏展开而产生的宽度变化。
比如一个 flex: 1 的面板，在侧边栏收起后宽度从 600px → 1200px，window.onresize 和媒体查询都毫无反应，只有 ResizeObserver 能捕获这个变化。
真正难处理的是：当容器宽度在临界值附近抖动（如 598px ↔ 602px 来回跳），导致 class 频繁切换。这不是 API 问题，而是业务逻辑需要加节流或锁定最小稳定时间 —— 这个细节，多数人上线前才意识到。
