📐
免費CSS clamp() 產生器
為回應式排版和間距產生流體 CSS clamp() 值。設定最小/最大尺寸和視口範圍，即時預覽，複製單行 CSS。
載入後可離線使用
輸出單位：
CSS 值
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind 類
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px 寬 → 21.9px
Aa 22px
不同視口下的渲染尺寸
375px 寬Aa 16px
908px 寬Aa 24px
1440px 寬Aa 32px
clamp(min, preferred, max) 根據視口流暢地縮放數值，並在最小值和最大值處鎖定。它用一行程式碼取代了針對排版、間距和寬度的多個媒體查詢。
工作原理
此工具使用手寫的線性插值公式計算 CSS clamp() 值——沒有庫、沒有伺服器往返。你輸入兩個尺寸和兩個視口寬度；計算在瀏覽器中即時完成，產生一個可直接貼上的 clamp() 表示式，其中基於 vw 的首選值會讓字型大小或間距在這兩個斷點之間平滑縮放。
- 1線性斜率計算工具計算每畫素的斜率：(maxSize - minSize) / (maxViewport - minViewport)。然後將此斜率乘以 100 轉換為 vw 單位，這正是 CSS 視口相對縮放的核心原理。
- 2推導截距計算一個截距偏移（px 或 rem），使線性函式在最小視口處恰好等於你的最小尺寸。斜率和截距共同構成 clamp() 中的首選值——也就是實際縮放的部分。
- 3單位換算與輸出格式化如果選擇 rem 輸出，每個畫素值都會先除以你設定的根字型大小（預設 16px），再寫入 clamp() 字串。同時還會產生對應的 Tailwind 任意值類，按 Tailwind 語法將空格替換為底線。
- 4即時視口滑桿預覽範圍滑桿可以在 320px 到 1920px 寬度之間拖曳。在每個位置，同樣的斜率和截距公式會即時計算限定後的尺寸，並以該畫素大小渲染範例文字，讓你在複製之前就能看到縮放效果。