CSS 使用 Clamp() 限制屬性值區間

前言

還在為了調整響應式文字尺寸苦惱嗎?
你也覺得為了調整文字尺寸還要寫一堆媒體查詢很麻煩嗎?
能不能給定一個範圍讓他動態調整文字大小呢?

可以!

Clamp()的作用就是可以讓你把屬性值限制在一個上限與下限之間，所以不只文字大小，只要你可以給出最大值與最小值，那麼就可以用一行簡單的語法達成響應式的作用!

效果展示

clamp(MIN, VAL, MAX)

當 VAL 的值小於 MIN 值時，套用 MIN 值；當 VAL 的值大於 MAX 值時，套用 MAX 值；當 VAL 的值介於兩者之間時，套用 VAL 值。

※須注意目前 IE 仍不支援此函式

實作

後記

小小記錄下 clamp() 的用法，也順便分享給大家使用，有了這個函數可以減少很多媒體查詢的使用，也可以精簡程式碼，算是一舉兩得。

謝謝各位看到這邊，也請各位看倌多多指教與交流。

Whatever is worth doing is worth doing well.

Photo by Altınay Dinç on Unsplash