固定寬度下，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;
 }

相關文章