Resize Observer API - 用于监视元素大小的变化

Resize Observer API 提供了一种高性能机制，代码可以通过该机制监视元素大小的变化，每次大小变化时都会向观察者发送通知。

概念和用法

响应式设计技术（以及其他技术）有大量的用例来响应元素大小的变化，但以前它们的实现通常很笨拙和 / 或脆弱。

例如，媒体查询 / window.matchMedia 非常适合在视口改变大小时在特定点更新布局，但如果你想在一个特定元素的尺寸改变时改变布局，而这个元素并不是外部容器，那该怎么办？

为了实现这一点，一个有限制的解决方案是监听合适的事件的变化，该事件提示你感兴趣的元素的尺寸变化（例如窗口 resize event)，然后使用 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 => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize[0].inlineSize/10) +
                                                      (entry.contentBoxSize[0].blockSize/10)) + 'px';
    } else {
      entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
                                                      (entry.contentRect.height/10)) + 'px';
    }
  }
});

resizeObserver.observe(document.querySelector('div'));

规范

规范
Resize Observer # resize-observer-interface

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• ResizeObserver：就像元素的 document.onresize