clamp()

CSS 容器查詢單位 cqi

其實 cqi 的使用方式有點類似 rem 與 em 的關係。

當我們設定了 rem，就可以知道一個 em 實際是多少；當網頁需要調整整體比例時，只需要改動 rem 的值，就能讓所有使用 em 的元素跟著連動變化，維持一致的比例。也就是說，你可以簡單地將 cqi 理解成「容器內的 root 單位」

在處理自適應網頁的設計中，常常會遇到類似的畫面需求，我們希望字體的大小可以隨著螢幕尺寸自動變換，以滿足用戶在不同設備的閱讀體驗。遇到這種情況我們通常會使用到 vw（viewport width，可視區佔比）的單位，讓字體大小可以隨著視窗寬度變化。