"ResizeObserver box 选项：content-box 与 border-box 与 device-pixel-content-box"

概述ResizeObserver 支持观察不同盒模型尺寸：`content-box`（内容区）、`border-box`（包含边框）、`device-pixel-content-box`（设备像素级内容区，适合高 DPI）。选择正确的盒模型有助于避免不必要的重新布局或错误的尺寸计算。示例const ro = new ResizeObserver(entries => { for (const e of entries) { const size = e.devicePixelContentBoxSize?.[0] || e.borderBoxSize?.[0] || e.contentBoxSize?.[0] console.log(size.inlineSize, size.blockSize) } }) ro.observe(document.querySelector('.panel'), { box: 'device-pixel-content-box' }) 工程建议选择策略：图像/画布选择 `device-pixel-content-box`；组件布局选择 `border-box`；内容测量选择 `content-box`。性能：避免在大量节点上观察高频变化；合并更新与节流。兼容：特性检测并回退；在不支持像素内容盒时使用 `content-box`。参考与验证MDN ResizeObserver 文档：https://developer.mozilla.org/docs/Web/API/ResizeObserverweb.dev 相关指南：https://web.dev/articles/resize-observer