Ant-design中有这样一个头像组件，当字符串较长时，可以根据头像的宽度自动调整字体大小，效果如下：当然这里是根据字符数自动调整通过JSScaledtext实现。现在，只需要通过CSS就可以实现类似的效果，如下：一起来看看吧！1.CSS容器尺寸单位要实现这个效果，就需要用到容器尺寸单位。这些单元与CSS容器查询[1]一起出现，如下所示。容器查询可以参考这篇文章：介绍2022年最值得期待和官方支持的CSS容器查询?张新旭-新空间-新生活(zhangxinxu.com)[2]，本文不涉及具体的容器查询语句.cqw容器查询宽度（ContainerQueryWidth）的比例。1cqw等于容器宽度的1%。假设容器宽度为1000px，那么1cqw对应的计算值为10px。cqh容器查询高度（ContainerQueryHeight）的比例。1cqh等于容器高度的1%。cqi表示容器查询内联大小（ContainerQueryInline-Size）的比例。这是逻辑属性单元，默认相当于cqwcqb容器查询块级方向大小（ContainerQueryBlock-Size）的比例。同上，默认情况下等同于cqh。.cqmin容器查询较小尺寸（ContainerQueryMin）的比率。取cqw和cqh中较小的一个。cqmax表示较大的容器查询大小（ContainerQueryMin）的比例。取cqw和cqh中的较大者。有了这些尺寸单位，就很容易意识到文字的尺寸会随着容器的尺寸而变化。下面是一个例子：
