固定寬度下,CSS 實現自適應文字

Allan91 發表於 2022-11-23
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;
 }