CSS clamp() 計算器
給小螢幕和大螢幕各設一個尺寸,得到一個中間平滑過渡的響應式 clamp() 值——字級、內距、外距、間距都能用。
最小值
最大值
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)結果的中間部分保留了 rem 成分,所以有人放大到 200% 時文字仍會變大——只用視口單位就做不到。
流動文字,大小剛好。
計算全部在你的瀏覽器裡完成,這裡輸入的內容不會上傳到 BroBroGo。
常見問題
clamp() 值是怎麼算出來的?
你給兩個點:小螢幕寬度下的一個尺寸,和大螢幕寬度下的一個尺寸。工具在兩點之間畫一條直線,螢幕變寬時尺寸就平滑增大,再用 clamp() 把它包起來,讓它既不會小於你的小螢幕尺寸,也不會大於大螢幕尺寸。兩個寬度之間尺寸流動縮放,超出這個範圍就停在最近的界限上。
為什麼結果用 rem 和 vw,而不是像素?
上下限用 rem,中間會變化的部分也保留了 rem 成分,所以讀者放大頁面或調高瀏覽器預設字級時文字仍會跟著變大——只用像素或只用視口單位就可能做不到。你按像素輸入是因為大多數人習慣這麼想,工具會用你的根字級換算成 rem。
除了字級,能用來做間距嗎?
可以。同一個值也能用在內距、外距、間距、寬度或高度上——任何需要長度的地方都行。把預覽切到「方塊」就能看到間距而不是文字在變大。如果小螢幕和大螢幕尺寸一樣,結果會退化成一個固定長度,因為沒有可縮放的空間。
所有瀏覽器都支援 clamp() 嗎?
支援——自 2020 年起所有主流瀏覽器都支援 clamp(),可以直接用,不用寫退回方案。如果最大值特別大或變化特別快,建議放大到 200% 檢查一下,確認需要放大的讀者仍能看到文字變大。