调整观察者 API 大小

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

例如， 媒体查询 / window.matchMedia 非常适合在视口改变大小时在特定点更新布局，但是如果您想根据特定元素的大小变化（不是外部容器）来更改布局，该怎么办？

为了实现这一点，一个有限的解决方案是监听适当事件的变化，该事件暗示你感兴趣的元素改变大小（例如，窗口 调整大小事件 ），然后确定调整大小后元素的新尺寸或其他特征 Element.getBoundingClientRect 或者 Window.getComputedStyle ， 例如。

这样的解决方案往往只适用于有限的用例，对性能不利（不断调用上述方法会导致性能大幅下降），并且在浏览器窗口大小不变时通常不起作用。

Resize Observer API 不仅能解决这类问题，还能让你以高效的方式轻松观察和响应元素内容或边框大小的变化。它为经常被讨论的缺乏 JavaScript 解决方案提供了解决方案。 元素查询 在网络平台上。

使用方法很简单，与其他观察器基本相同，例如 性能观察者 或者 路口观察员 — 你创造了一个新的 ResizeObserver 对象使用 ResizeObserver() 构造函数，然后使用 ResizeObserver.observe() 使其检测特定元素尺寸的变化。构造函数内部设置的回调函数会在每次尺寸变化时运行，从而提供对新尺寸的访问，并允许您根据这些变化执行任何您想做的事情。

ResizeObserver

提供注册新观察员以及启动和停止观察元素的能力。

ResizeObserverEntry

描述已调整大小的单个元素，标识该元素及其新大小。

您可以在我们的 GitHub 存储库中找到几个简单的示例：

• 调整观察者边框半径.html （ 查看来源 )：一个简单的示例，其中有一个绿色框，其大小按视口大小的百分比进行调整。当视口大小改变时，框的圆角会根据框的大小按比例变化。我们可以使用以下代码来实现： border-radius 使用百分比，但这很快会导致难看的椭圆角，而上述解决方案可以为您提供与盒子尺寸一起缩放的漂亮圆角。
• 调整观察者文本的大小.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"));

• ResizeObserver：类似于 Elements 的 document.onresize