商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。
從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。
FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~
隨著回應式網頁的普及，各大瀏覽器都已經支援 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 沒有瀏覽器支援度的問題，是可以實際使用在專案的語法。需要寫前端的讀者可以參考看看。
延伸閱讀
商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。
從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。
FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~