設計 / 響應式
流動式字體排版與間距的CSS Clamp()產生器
輸入最小與最大尺寸，以及各自適用的視窗寬度，即可取得以rem為單位、在兩者之間平順縮放的clamp()運算式，並查看常見螢幕寬度下的尺寸表。
流動式字體排版與間距的CSS Clamp()產生器: 此工具會在兩個點之間畫出一條直線：從視窗寬度為320 px時的16 px，到1280 px時的24 px，尺寸每增加100 px的寬度就成長0.8333 px。這條線會寫成固定的rem部分加上vw部分，也就是0.8333rem + 0.8333vw；在超出這個範圍時，clamp()會將結果限制在1rem到1.5rem之間。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。
- 分類
- 開發者工具
- 使用次數
- 在瀏覽器中
- 費用
- 免費・免註冊
- 可用狀態
- 可立即使用
全程在瀏覽器中執行
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| 視窗寬度 | 大小 |
|---|---|
| 320 px | 16 px |
| 375 px | 16.46 px |
| 768 px | 19.73 px |
| 800 px | 20 px |
| 1024 px | 21.87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
clamp() 的中間值是穿過你提供的兩個點的直線：它會將固定的 rem 數值加上視窗寬度的一部分，讓大小在兩個寬度之間平順縮放，超出範圍後則停在限制值。固定部分使用 rem，可讓大小配合讀者自己的 font-size 設定。這適用於任何長度，例如字型大小、內距、間距或外距。
實際範例
假設標題在375 px手機上是32 px，在1440 px桌上型電腦上是48 px，斜率就是16 ÷ 1065 = 1.5023 px per 100 px，運算式為clamp(2rem, 1.6479rem + 1.5023vw, 3rem)。在800 px平板上，標題會是38.38 px。
無障礙
WCAG要求文字可以放大至200%。由於流動尺寸的部分取決於檢視區域，過大的斜率可能導致放大後文字無法大幅增加；請讓最大尺寸不超過最小尺寸的約2.5倍，並使用type scale產生器選擇一致的步階。
使用方式
- 輸入以px為單位的最小與最大尺寸。
- 輸入各尺寸適用的視窗寬度。
- 複製clamp()值，並在表格中確認各尺寸。
隱私與限制
在您的瀏覽器中計算。
相關工具
常見問題
為什麼不直接使用vw？
單獨使用vw會忽略讀者設定的字型大小，在手機上可能變得太小，在寬螢幕上則可能變得太大。clamp()中的rem部分與限制值可以同時解決這兩個問題。
clamp()到處都能使用嗎？
可以：所有目前的瀏覽器自2020年起都支援clamp()。
在更寬的螢幕上，尺寸可以變小嗎？
可以：輸入較大的最小寬度尺寸，運算式就會改為減去vw部分。
免費工具・使用在瀏覽器中次・免註冊