使用 watched-box 和 resizeasaurus 玩转（伪）容器查询

Heydon 的 <watched-box> 是一个非常棒的工具。它是一个自定义元素，本质上是通过根据 ResizeObserver 计算的大小断点添加到框中的类名来实现容器查询。它就像 菲利普几年前谈论的 一个更简洁的版本。

我相信我很乐意在生产中使用 <watched-box>，因为它轻量级，没有依赖项，并且具有直接的方法。

在开发方面，我想到使用 Zach 有趣的 <resize-asaurus> 网页组件。它将元素包裹在另一个可以通过 CSS 调整大小的框中，并用当前宽度对其进行标记。这样，您就不必调整整个浏览器窗口来调整大小——任何给定的元素都可以调整大小。同样，这仅仅是为了开发和测试的原因。

您将它们组合在一起，例如...

<resize-asaurus>
  <watched-box widthBreaks="320px, 600px">
    <div class="card">
      ... 
    </div>
  </watched-box>
</resize-asaurus>

这允许您在断点处编写 CSS，例如...

.card {
   .w-gt-320px & { }
   .w-gt-600px & { } 
}

这当然不是容器查询语法最终的 CSS 语法，但它通过清晰易懂的生成类名实现了相同的功能。

示例！

实时演示！