resizeobserver 通过监听父容器尺寸变化动态调整侧边栏与主区域布局，结合 css 自定义属性和状态管理实现轻量、稳定、可动画的响应式效果。
用 ResizeObserver 动态调整侧边栏与主区域布局，核心是监听容器尺寸变化，而非依赖窗口大小或手动触发重绘。它适合响应式侧边栏（如可拖拽缩放、折叠展开、自适应分屏等场景），避免频繁计算和重排。
监听父容器而非整个窗口
侧边栏+主内容通常包裹在一个共同父容器（如 .layout-container）中。直接监听该容器，能精准捕获内部布局变化（例如用户拖动分割线、切换折叠状态）：
- 避免监听
window导致的过度响应（比如滚动、标签页切换也会触发） - 确保只在真正影响布局时更新比例，提升性能
- 示例：若侧边栏用
flex实现，监听其父容器即可感知flex-basis或width的实际渲染值变化
用 CSS 自定义属性同步尺寸数据
将观测到的宽度/比例通过 CSS 自定义属性注入样式层，让布局逻辑与样式解耦：
- 在回调中设置：
container.style.setProperty('--sidebar-width', `${width}px`) - CSS 中使用：
.sidebar { width: var(--sidebar-width, 240px); }，主区域用flex: 1或calc(100% - var(--sidebar-width)) - 好处：无需操作 DOM 样式或重新计算 class，CSS 自动响应，支持 transition 动画
处理折叠/展开的边界状态
侧边栏常有「完全收起」「最小宽度」「自由缩放」三种状态，ResizeObserver 需配合状态标识判断是否真正需要更新比例：
- 记录上一次有效宽度（如
lastValidWidth），当新宽度趋近于 0（如 ≤ 8px）且处于折叠态时，跳过赋值，防止抖动 - 折叠时主动设为
--sidebar-width: 0并添加overflow: hidden类，展开时再恢复观测 - 避免在动画进行中高频触发（可用
requestAnimationFrame节流，但通常 ResizeObserver 本身已足够平滑）
兼容性与降级方案
ResizeObserver 在现代浏览器中支持良好（Chrome 64+, Firefox 69+, Safari 13.1+），旧版需降级：
- 检测支持：
if ('ResizeObserver' in window)，否则回退到监听resize事件 +getBoundingClientRect() - 对 IE 等不支持者，固定比例（如
sidebar: 240px，主区flex: 1），不启用动态缩放 - 服务端渲染（SSR）场景下，首次加载时无法观测，需在
useEffect（React）或mounted（Vue）中初始化观察器
关键不在“监听多频繁”，而在“监听谁”和“怎么用”。把容器作为观测目标，用 CSS 变量驱动样式，再结合状态管理边界行为，就能实现轻量、稳定、可动画的动态布局。
