一直有让字体大小基于包裹文本的容器大小而定的需求，之前的实现都很复杂而且不够丝滑，今日得知，在2022年发布了新的容器查询。

<div>
  <p>金箍棒</p>
</div>

<style>
  div {
    container-type: inline-size;
  }
  p {
    font-size: 5cqw;
  }
</style>

具体的可以见 codepen示例

容器查询使您能够根据元素容器的大小对元素应用样式。例如，如果容器在周围上下文中可用空间较少，则可以隐藏某些元素或使用较小的字体。容器查询是媒体查询的替代方案，后者根据视口大小或其他设备特征对元素应用样式。
CSS Container Queries

目前主流浏览器已经支持：
Can I use cqw