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

Demo 地址：Just a moment...

上面錄屏的效果就是文字大小隨著容器的大小變化的。實現(xiàn)視頻中的效果使用的是 CSS 的新特性，容器查詢 ，并且使用了 CSS 新增的容器單位。

先來看如何實現(xiàn)的吧：

<div class="container">
    <div class="box">右下角拖動我，可以根據(jù)容器寬度改變字號</div>
</div>

關(guān)鍵的 CSS 代碼：

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

CSS 容器查詢是什么，這里就不詳細闡述了，感興趣的話，你可以移步閱讀相關(guān)教程：

• 下一代響應(yīng)式 Web 設(shè)計：容器查詢

• 初探CSS容器查詢_CSS, 容器查詢, @container, contain, 會員專欄, Responsive 教程_W3cplus

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

• 容器查詢給設(shè)計帶來的變化_CSS, 容器查詢, Responsive, Layout, 會員專欄 教程_W3cplus

這里簡單說一下容器查詢單位。

容器查詢單位的工作原理和視窗單位，比如vw、vh、vmin、vmax等非常相似。不同的是，視窗單位是相對于瀏覽器視窗尺寸計算；容器查詢單位是相對于查詢?nèi)萜鞒叽缬嬎?/span>：

• 1cqw 等于查詢?nèi)萜鲗挾龋?code style="user-select: text !important; background-color: rgb(246, 246, 246); border-radius: 3px; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.9em; margin: 0px 2px; padding: 3px 4px;">width）的 1%；

• 1cqh 等于查詢?nèi)萜鞲叨龋?code style="user-select: text !important; background-color: rgb(246, 246, 246); border-radius: 3px; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.9em; margin: 0px 2px; padding: 3px 4px;">height）的 1%；

• 1cqi 等于查詢?nèi)萜鲀?nèi)聯(lián)大?。?code style="user-select: text !important; background-color: rgb(246, 246, 246); border-radius: 3px; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.9em; margin: 0px 2px; padding: 3px 4px;">inline-size）的 1%；

• 1cqb 等于查詢?nèi)萜?span style="user-select: text !important;">塊大小（block-size）的 1%；

• 1cqmin 等于 1cqi 或 1cqb 中較小的一個值；

• 1cqmax 等于 1cqi 或 1cqb 中較大的一個值。

容器查詢單位出現(xiàn)之后，可以幫助我們在處理組件內(nèi)元素樣式，比如 font-size、 padding 和 margin 等，節(jié)省很多的精力和時間。例如，我們可以使用容器查詢單位代替手動增加字體大小。

容器查詢單位還沒有的時候，我們一般會像下面這樣改寫卡片組件標(biāo)題的 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;
    }
}

有了容器查詢單位之后，同樣是給卡片組件標(biāo)題設(shè)置 font-size ，只需要一行代碼即可：

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

當(dāng)然，我們也可以像前面課程中介紹 vw 設(shè)置 font-size 的方法一樣，使用容器查詢單位來給卡片組件標(biāo)題設(shè)置font-size：

/* 視窗單位設(shè)置 font-size */
.card__title {
    font-size: clamp(1.2rem, 5vw + 1rem, 3rem);
}
/* 容器查詢單位設(shè)置 font-size */
.card__title {
    font-size: clamp(1.2rem, 5cqi + 1rem, 3rem);
}

注意，早期的容器查詢單位原型是 q* 而不是現(xiàn)在的 cq* ，所以可能會在早期的一些容器查詢單位的 Demo 中看到類似 qw 、qh 單位，而且很有可能不能正常運行。

就如上圖中所示，你還可以將 CSS 的比較函數(shù) clamp() 結(jié)合起來使用。讓你的字號可以有一個更好的設(shè)置。

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

00:09

Demo 地址：Just a moment...

將 clamp() 和容器查詢單位結(jié)合 在一起之后，.box 的 font-size 最小不會小于 0.8rem ，最大不會大于 2.5rem ，而且還可以隨著容器的尺寸動態(tài)調(diào)整 font-size 。

是不是很有意思。如果你從未接觸過 CSS 的比較函數(shù)，可以移步閱讀：