window 的 resize 事件只反映视口变化，元素自身的尺寸改变（内容增删、容器布局、折叠面板展开）无法得知。ResizeObserver 观察任意元素，尺寸一变就在回调里给出 contentRect（width/height/x/y），与 IntersectionObserver 一样是异步批量回调。
用途包括：容器查询的基础（容器尺寸驱动样式切换）、图表自适应重绘、弹层随内容定位、字体随容器缩放。回调里直接读取布局是安全的，因为浏览器已布局完成；但仍要避免在回调里同步改尺寸引发循环，配 disconnect 或 unobserve 取消监听。
var ro = new ResizeObserver(function (entries) { entries.forEach(function (en) { var r = en.contentRect; en.target.textContent = '当前宽 ' + Math.round(r.width) + 'px，高 ' + Math.round(r.height) + 'px'; if (r.width < 400) { en.target.style.background = '#e78a3e'; } else { en.target.style.background = '#4a9eff'; } }); }); var box = document.createElement('div'); box.style.cssText = 'width: 60%; padding: 16px; color: #fff; border-radius: 8px;'; box.textContent = '拖动窗口看我变化'; document.body.appendChild(box); ro.observe(box);