CSS Comparison Functions：min(), max(), and clamp()

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

隨著回應式網頁的普及，各大瀏覽器都已經支援 CSS min(), max(), clamp()。使用這三個 function 除了可以簡化 CSS 程式碼，更因為可以內嵌運算式，加上 CSS 目前是朝原生參數化的方向在走，在實際使用上可以有更多的想像和寫法。

min(), max(), clamp() 的官方文件在這裡
https://www.w3.org/TR/css-values-4/#comp-func

這份官方文件是 “CSS Values and Units Module Level 4″，狀態是 WD (Working Draft)。對 CSS 演進方式，和成熟過程不熟的朋友，可以參考我之前的文章 CSS 的演進方式

有個觀察點滿有趣的，WD 是四個成熟過程中最低的，也就是最不成熟的，但現在主要瀏覽器都已實作 min(), max(), clamp()。所以讀者在看一個 CSS 和它的官方文件時，該文件的成熟狀態並不代表某個 CSS 的瀏覽器支援度。

這份文件的第 11 章是 “Mathematical Expressions”

11.1 Basic Arithmetic: calc()
11.2 Comparison Functions: min(), max(), and clamp()
11.3 Stepped Value Functions
11.4 …

大概架構是這樣。calc() 大家都熟悉，瀏覽器也都支援。再來是 min(), max(), and clamp()，是本篇要聊的。11.3 之後就有很大的瀏覽器支援度問題了，可能也就是這份文件，以整份文件而言是 WD 狀態的原因。

回到 min(), max(), clamp()，我們先看 min(), max()，都是在多個參數裡，取出最小 / 最大值，例如

width: min(800px, 70%, 50vw);

隨著瀏覽器大小，70% 跟 50vw 是動態的，min() 也會動態的取三個數值的最小值。當然，如果是 max() 就是取最大值。再來，min(), max() 可以在參數裡加運算式

width: min(calc(50% - 20px), 100px);
width: min(50% - 20px, 100px);  // 效果與上一行同, 可以拿掉 calc

還有一個滿常見的用法是，元素的寬度隨容器寬度比例，但不希望元素太寬，可能會這樣寫

width: 80%;
max-width: 600px;
//====== 下面一行可以取代上面兩行 =======
width: min(80%, 600px);

同理，如果希望元素的寬度隨容器寬度比例，但不希望容器縮小時元素太小，可以這樣寫

width: 20%;
min-width: 100px;
//====== 下面一行可以取代上面兩行 =======
width: max(20%, 100px);

clamp() 則是吃三個參數，依序是最小值，動態值，最大值。如果當下最小值 < 動態值 < 最大值，return 動態值。如果當下動態值 < 最小值，return 最小值。如果當下最大值 < 動態值，return 最大值。

width: clamp(100px, 30%, 500px);
width: clamp(100px, 30% - 10px, 500px); // 也可以吃運算式

接下來就是 clamp() 最厲害的應用：用它來設定 font size。傳統製作回應式網頁時，是用 media query 來設定 font size。例如螢幕寬度 300px~500px，font-size: 12px; 螢幕寬度 500px~800px，font-size: 14px; …等。但如果用 clamp() 設定 font size，一行解決，而且是「真回應式」

font-size: clamp(1rem, 1vw + 0.5rem, 3rem);

結論

min(), max(), clamp() 這 3 個 function 基本上可以應用在

控制元素本身的寬 / 高
控制元素間的 padding, margin
最有用的是，用 clamp() 設定 font size

而且這 3 個 function 沒有瀏覽器支援度的問題，是可以實際使用在專案的語法。需要寫前端的讀者可以參考看看。

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

結論

延伸閱讀