CSS clamp() 的字型尺寸設定應用

很久沒寫網頁相關文了，
反正世界上這麼多人在認真寫哪缺我一人XD
不過今天難得認真的看了一下相關文章決定還是記錄一下。

就是CSS現在有 clamp() 這個 function 可以使用，
語法是 clamp(MIN, VAL, MAX)，
也就是可以指定最小值（MIN）和最大值（MAX）以及優先值（VAL）（通常使用相對數值），
交由 clamp() 來判斷，
如果在目前的狀況下優先值介於最小值與最大值之間，就會使用優先值；
優先值比最小值小時會使用最小值；
優先值比最大值大時會使用最大值。
這樣的功能很適合用在 RWD ，
某些狀況下甚至不需要 media query 就能達成很好的效果。

最近常見的介紹是使用在字型尺寸的設定上，
可以依據螢幕寬度的不同自動依設定調整字型大小，
不過因為優先值需要計算，有人也直接提供了計算機：
https://fluid-typography.netlify.app/
可是文中關於計算的方法完全沒有介紹而是連結到課程推薦網頁實在讓人不爽，
於是找到了這篇詳細的教學：
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

以下依照上述教學網頁中提供的範例數值提供簡單的華語摘要：

範例目標設定：
當畫面寬度為 360px 或以下時字型尺寸為 1rem；
當畫面寬度為 840px 或以上時字型尺寸為 3.5rem。
範例中 1rem 都使用預設值 16px。

要求出當畫面寬度在 360px 和 840px 之間時線性對應的字型尺寸值，有以下四步驟：

步驟一：
設定斷點的最小/最大寬度及其對應的最小/最大字型尺寸，這在上面範例目標已經寫過了：

最小寬度：360px
最大寬度：840px
最小字型尺寸：1rem
最大字型尺寸：3.5rem

步驟二：
把寬度值也都用 rem 單位進行換算，範例中 1rem 是預設值 16px ，所以結果如下：

最小寬度：22.5rem
最大寬度：52.5rem
最小字型尺寸：1rem
最大字型尺寸：3.5rem

步驟三：
必須計算斜率（請見原文圖示便很好理解）與y軸交點，公式整理如下：

斜率：（最大字型尺寸 - 最小字型尺寸）/（最大寬度 - 最小寬度）
y軸交點： -最小寬度 * 斜率 + 最小字型尺寸

因步驟二已經把寬度換算成 rem ，因此此步驟可以簡單的計算得到結果：

斜率：0.08333
y軸交點： -0.875

步驟四：
取得上述數值後便可用來計算 clamp() 中的優先值，公式如下：

優先值 = y軸交點[rem] + (斜率 * 100)[vw]

這是原文寫的公式但我剛看時想了好一陣子...為什麼斜率要 * 100啊？？？
然後才恍然大悟並不是斜率要 * 100，
而是「100vw」也就是畫面寬度要 * 斜率，然後最後的單位會是 vw 而已 = =||||||
覺得被整理成這樣反而有點難理解XD
希望寫出來可以幫助跟我一樣腦袋打結的人（會有嗎？）

總之最後算完就可以用來指定文字尺寸了，寫出來就是這樣：

font-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem);

原文也提供了很清楚的 codepen 範例：
https://codepen.io/pprg1996/pen/yLONLPv

就是這樣。

相信大家看完......都會去用計算機XDDDD

（但是計算機也是預設 1rem = 16px ，如果不是的話就要自己認命的算啦！）