Resize Observer API
Resize Observer API 提供了一种高效的机制，使代码能够监视元素的大小变化，并在每次大小发生变化时向观察者发送通知。
概念和用法
响应式设计技术（以及其他技术）存在大量用例，这些用例会对元素大小的变化做出响应，但以前它们的实现通常很笨拙且/或脆弱。
例如，媒体查询 / window.matchMedia 非常适合在视口大小发生变化时更新布局，但如果希望响应特定元素大小的变化（而不是外部容器）来更改布局怎么办？
为了实现这一点，有限的解决方案是监听暗示感兴趣元素大小变化的适当事件（例如，窗口resize 事件），然后使用 Element.getBoundingClientRect 或 Window.getComputedStyle 等方法确定调整大小后元素的新尺寸或其他特性。
这种解决方案往往只适用于有限的用例，对性能不利（不断调用上述方法会导致巨大的性能损失），并且在浏览器窗口大小未发生更改时通常不起作用。
Resize Observer API 为此类问题（以及更多问题）提供了解决方案，使您能够以高效的方式轻松观察和响应元素内容或边框框大小的变化。它为 Web 平台中经常讨论的缺乏元素查询 提供了 JavaScript 解决方案。
用法很简单，与其他观察者（如 Performance Observer 或 Intersection Observer）基本相同——使用 ResizeObserver() 构造函数创建一个新的 ResizeObserver 对象，然后使用 ResizeObserver.observe() 使其查找特定元素大小的变化。然后，在构造函数内部设置的回调函数会在每次大小发生变化时运行，提供对新尺寸的访问权限，并允许您根据这些变化执行任何操作。
接口
ResizeObserver-
提供注册新观察者以及开始和停止观察元素的功能。
ResizeObserverEntry-
描述一个已调整大小的单个元素，识别该元素及其新大小。
示例
您可以在我们的 GitHub 仓库中找到几个简单的示例
- resize-observer-border-radius.html (查看源代码)：一个简单的绿色框示例，其大小为视口大小的百分比。当视口大小发生变化时，框的圆角会按比例变化。我们只需使用
border-radius和百分比来实现这一点，但这很快会导致外观难看的椭圆形角，而上述解决方案则提供了随框大小缩放的漂亮圆角。 - resize-observer-text.html (查看源代码)：在这里，我们使用调整大小观察器更改标题和段落的
font-size，因为滑块的值发生变化会导致包含的<div>宽度发生变化。这表明即使元素的大小变化与视口无关，也可以对其做出响应。
代码通常会遵循这种模式（取自 resize-observer-border-radius.html）
const resizeObserver = new ResizeObserver((entries) => {
const calcBorderRadius = (size1, size2) =>
`${Math.min(100, size1 / 10 + size2 / 10)}px`;
for (const entry of entries) {
if (entry.borderBoxSize) {
entry.target.style.borderRadius = calcBorderRadius(
entry.borderBoxSize[0].inlineSize,
entry.borderBoxSize[0].blockSize,
);
} else {
entry.target.style.borderRadius = calcBorderRadius(
entry.contentRect.width,
entry.contentRect.height,
);
}
}
});
resizeObserver.observe(document.querySelector("div"));
规范
| 规范 |
|---|
| Resize Observer # resize-observer-interface |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。