CSS clamp 響應式字級產生器

依字級與視窗寬度上下限產生響應式 clamp()，支援 px、rem 及即時字級預覽。

字級單位

px rem

最小字級最大字級最小檢視區 · px 最大檢視區 · px

根元素字級 · px

rem 依填入的根字級計算。套用到網頁後，請檢查瀏覽器縮放與放大文字時的效果。

模擬檢視區寬度 · px

合適的字級，讓每一段文字都清晰好讀。

CSS

內容僅在此瀏覽器處理，不會上傳或儲存。

工具介紹

先確定手機與桌面標題的最小、最大字級，再檢查兩者之間的過渡。

設計工具

填入最小與最大字級，以及各自對應的視窗寬度，選擇 px 或 rem。拖曳模擬視窗滑桿查看計算字級，再複製或下載 font-size: clamp(...)。兩個寬度必須遞增，最小字級不可大於最大字級。

字級在指定寬度區間內線性變化，區間外維持上下限。使用 rem 時，請讓根字級設定與目標網頁一致。公式依視窗寬度計算，不是依容器寬度，也不會改寫其他排版樣式。

預覽會用根字級把 rem 換成像素，應與實際頁面一致。公式依視口寬度變化；根字級不同，實際效果也會改變。

例如視口 400px 時要 16px、1200px 時要 32px，選 px 並填入這兩組資料，即得到 clamp(16px, 8px + 2vw, 32px)。800px 視口會是 24px，超出範圍維持上下限；公式依視口寬度變化，而非容器寬度。