回應式設計

網頁功能： 容器查詢 (大小) 小型、大型和動態可視區域單位 aspect-ratio min()、max() 和 clamp() 可視區域單位

整體最佳做法

  • 使用 @container 查詢，建立以元件為基礎的回應式版面配置，根據上層容器的大小 (而非可視區域) 調整。詳情請參閱「依大小設定樣式」。
  • 使用動態可視區域單位 (dvh、dvw) 而非 vh/vw，避免行動瀏覽器 UI 元素 (例如網址列) 出現或消失時，版面配置發生錯誤。
  • 為媒體元素 (例如 <img> 和 <video>) 使用 aspect-ratio，在載入期間預留空間，避免 Cumulative Layout Shift (CLS)。

如要瞭解回應式 UI 背後的版面配置機制 (Flexbox、格線、容器查詢單位、可視區域單位)，請參閱「CSS 版面配置和回應式設計」。

回應式字體排版

  • 建議在 clamp() 中結合可視區域相對單位和字型相對單位，讓字型大小隨可視區域大小調整，同時確保字型大小保持在所需範圍內。例如 clamp(2rem, 1rem + 5vw, 4rem)。調整可視區域相對單位和字型相對單位的比例，控制字型大小變更的速度。
  • 請勿單獨使用 vw 設定字型大小，而不使用 clamp()，因為這可能會導致文字在極端螢幕上縮放得太小或太大。

如要根據容器 (而非可視區域) 縮放字體和間距，請參閱「流暢擴充」。