整體最佳做法
- 使用
@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()，因為這可能會導致文字在極端螢幕上縮放得太小或太大。
如要根據容器 (而非可視區域) 縮放字體和間距，請參閱「流暢擴充」。