在處理自適應網頁的設計中，常常會遇到類似的畫面需求，我們希望字體的大小可以隨著螢幕尺寸自動變換，以滿足用戶在不同設備的閱讀體驗。遇到這種情況我們通常會使用到 vw（viewport width，可視區佔比）的單位，讓字體大小可以隨著視窗寬度變化。
但 vw 有一個缺點，如果沒有經過仔細的計算，有可能會出現太大或太小的情況，例如 1vw 在 1920 FullHD 的螢幕寬度下，字體大小約 19px，換到 4K 螢幕後，字體大小會變成約 38px，但在 iPhone 16 裡，1vw 只剩下約 4px 的大小。它突顯 vw 的兩個問題：
- 字體容易過大或過小
- 比較難精準的控制
當我們遇到這種希望可以變大變小，又怕會太大太小，看似兩相矛盾的情況時，該怎麼辦呢？
看 clamp() 變大變小變變變
這種情況下，我們可以使用 clamp() 來限制字體大小的範圍，確保它既不會太大，也不會太小。clamp() 允許我們為指定的容器設定一個最小值、一個理想的動態值，以及一個最大值，語法如下：
clamp(最小值, 理想值, 最大值)什麼是理想值？
最大值及最小值都很好理解，但什麼是理想值呢？
以前面的例子來說，假設我們希望 4K 螢幕的字體最大到 30px，iPhone 手機則希望最小有 16px，至於介於兩者之間的設備只要滿足上面兩點即可。也就是說，理想值是指 16px - 30px 之間的任何數字，並隨著螢幕的大小動態改變。
在理解這點後，我們可以將 clamp() 設為：
clamp(16px, 2vw, 30px);也就是說，我們可以將最大值及最小值各設一組絕對單位，並在理想值的位置設定一組相對單位，如 vw、vh、％等等，這樣就可以滿足我們希望透過 vw 動態調整字體的大小，又限制的動態範圍 (16px - 30px) 的需求！
