分類: 開發工具
CSS clamp 產生器
不寫媒體查詢的流體字級
給定最小與最大字級以及對應的視窗寬度，取得在兩者之間平滑變化的 clamp() 宣告，並附上常見寬度下的實際算繪字級表。
輸出
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| 視窗寬度 | 實際算繪字級 |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
預覽
流體字級在手機上依然好讀，在桌機上也維持比例。
宣告在頁面內產生，不會上傳任何內容。
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
clamp() 取代了過去那一疊把標題切成四段的媒體查詢。麻煩的是中間那一項：它必須是通過你兩個點的直線，也就是斜率乘視窗寬度再加截距，寫成一個 vw 值加一個 rem 值。這裡替你算好。上下界都保留 rem，讓把瀏覽器預設字級調大的訪客依然拿到較大的字；表格則列出 360、768、1024、1280、1600 像素時瀏覽器真正算繪出的字級，讓變化看得見而不是靠猜。同一個值也能用在內距、間距與外距，不只限於文字。
使用方式
- 填寫最小字級，以及它生效的視窗寬度。
- 填寫最大字級，以及不再變大的視窗寬度。
- 複製 clamp() 宣告並核對預覽表。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 為什麼上下界用 rem 而不是 px？
- 只用視窗單位表示的字級會忽略瀏覽器的文字大小設定，這是無障礙缺陷。以 rem 為界會跟著訪客自己的預設字級縮放。
- 可以用在間距上嗎？
- 可以。這個值就是一個長度，padding、margin、gap、width 等接受長度的屬性都適用。
- 會傳送內容到伺服器嗎？
- 不會。宣告是在頁面內依你輸入的數字算出來的，所以才能即時更新。