固定宽度下，CSS 实现自适应文本

CSS 容器尺寸单位

• cqw 容器查询宽度（Container Query Width）占比。1cqw 等于容器宽度的 1%。假设容器宽度是 1000px，则此时 1cqw 对应的计算值就是 10px。
• cqh 容器查询高度（Container Query Height）占比。1cqh 等于容器高度的 1%。
• cqi 表示容器查询内联方向尺寸（Container Query Inline-Size）占比。这个是逻辑属性单位，默认情况下等同于 cqw
• cqb 容器查询块级方向尺寸（Container Query Block-Size）占比。同上，默认情况下等同于 cqh
• cqmin 容器查询较小尺寸的（Container Query Min）占比。取 cqw 和 cqh 中较小的一个
• cqmax 表示容器查询较大尺寸的（Container Query Min）占比。取 cqw 和 cqh 中较大的一个

有了这些尺寸单位，可以很轻易的实现文字大小随着容器尺寸的变化而变化，下面举个例子

 <div class="con">
   <p class="text">大家好，欢迎关注前端侦探</p>
 </div>

在不声明容器类型的情况下，cqw 等同于 vw，也就是相当于把整个页面当成容器，这里希望将这个 div 作为参考对象，需要提前声明 container-type，如下

 .con {
     container-type: inline-size;
 }
 .text{
   font-size: 10cqw;
 }