到目前为止，除了使用 Javascript 之外，使用纯 CSS 也是可以的。

Demo 地址：Just a moment...

上面录屏的效果就是文字大小随着容器的大小变化的。实现视频中的效果使用的是 CSS 的新特性，容器查询 ，并且使用了 CSS 新增的容器单位。

先来看如何实现的吧：

<div class="container">
    <div class="box">右下角拖动我，可以根据容器宽度改变字号</div>
</div>

关键的 CSS 代码：

.container {container-type: inline-size;}
.box {font-size: 5cqw;}

CSS 容器查询是什么，这里就不详细阐述了，感兴趣的话，你可以移步阅读相关教程：

• 下一代响应式 Web 设计：容器查询

• 初探CSS容器查询_CSS, 容器查询, @container, contain, 会员专栏, Responsive 教程_W3cplus

• https://www.w3cplus.com/css/container-queries-with-container-and-at-container.html

• 容器查询给设计带来的变化_CSS, 容器查询, Responsive, Layout, 会员专栏 教程_W3cplus

这里简单说一下容器查询单位。

容器查询单位的工作原理和视窗单位，比如vw、vh、vmin、vmax等非常相似。不同的是，视窗单位是相对于浏览器视窗尺寸计算；容器查询单位是相对于查询容器尺寸计算：

• 1cqw 等于查询容器宽度（width）的 1%；

• 1cqh 等于查询容器高度（height）的 1%；

• 1cqi 等于查询容器内联大小（inline-size）的 1%；

• 1cqb 等于查询容器块大小（block-size）的 1%；

• 1cqmin 等于 1cqi 或 1cqb 中较小的一个值；

• 1cqmax 等于 1cqi 或 1cqb 中较大的一个值。

容器查询单位出现之后，可以帮助我们在处理组件内元素样式，比如 font-size、 padding 和 margin 等，节省很多的精力和时间。例如，我们可以使用容器查询单位代替手动增加字体大小。

容器查询单位还没有的时候，我们一般会像下面这样改写卡片组件标题的 font-size ：

.card__title {
    font-size: 1rem;
}
/* 容器宽度大于 400px */
@container (width > 400px) {
    .card__title {
        font-size: 1.15rem;
    }
}
/* 容器宽度大于 600px */
@container (width > 600px) {
    .card__title {
        font-size: 1.25rem;
    }
}
/* 容器宽度大于 800px */
@container (width > 800px){
    .card__title {
        font-size: 2rem;
    }
}

有了容器查询单位之后，同样是给卡片组件标题设置 font-size ，只需要一行代码即可：

.card__title {
    font-size: clamp(1rem, 3cqw, 2rem);
}

当然，我们也可以像前面课程中介绍 vw 设置 font-size 的方法一样，使用容器查询单位来给卡片组件标题设置font-size：

/* 视窗单位设置 font-size */
.card__title {
    font-size: clamp(1.2rem, 5vw + 1rem, 3rem);
}
/* 容器查询单位设置 font-size */
.card__title {
    font-size: clamp(1.2rem, 5cqi + 1rem, 3rem);
}

注意，早期的容器查询单位原型是 q* 而不是现在的 cq* ，所以可能会在早期的一些容器查询单位的 Demo 中看到类似 qw 、qh 单位，而且很有可能不能正常运行。

就如上图中所示，你还可以将 CSS 的比较函数 clamp() 结合起来使用。让你的字号可以有一个更好的设置。

.box {font-size: clamp(.8rem, 10cqw + .8rem, 2.5rem);}

00:09

Demo 地址：Just a moment...

将 clamp() 和容器查询单位结合 在一起之后，.box 的 font-size 最小不会小于 0.8rem ，最大不会大于 2.5rem ，而且还可以随着容器的尺寸动态调整 font-size 。

是不是很有意思。如果你从未接触过 CSS 的比较函数，可以移步阅读：