CSS 的 max()、min() 與 clamp()

CSS3 提供了一些可以簡化我們以往撰寫 CSS 的函式符號的功能，這邊來說明一下其中的 max()、min() 以及 clamp() 的用法。

max()

max() 是用來定義某個尺寸的最大值，可以帶入兩個值，第一個值就是限制的最大值，第二的值則是預設值，比如說我們以前會像這樣定義 CSS：

div{
  width:100%;
  min-width:200px;
}

如果是在 max() 就可以改成這樣寫：

div{
  width:max(100%, 200px); 
}

意思就是最小寬度是 200px，預設寬度則為 100%。

因為 max() 是數學函數，所以裡面也可以直接寫計算式，像是：

h1{
  font-size:max(1rem + 1vw, 20px);
}

這樣就可以在讓 h1 變換文字大小的時候同時限制最小值了。

min()

相對於 max()，min() 則是可以固定最小值，同時給定的另一個值則是預設值。

像是原本我們會這樣寫：

div{
  width:640px;
  max-width:80vw;
}

改成用 min() 的話就會是像這樣：

div{
  width:min(640px, 80vw);
}

這樣就會限制最小寬度是 640px，預設的寬度為 80vw。

clamp()

clamp() 則是可以同時限制最大值、最小值以及給定預設值，所以可以給三個值分別為 clamp(MIN, VAL, MAX)，不過更精確的說應該是 max(MIN, min(VAL, MAX))。

用範例來說明，原本我們可能這樣寫：

div{
  width: 100%;
  min-width:640px;
  max-width:960px;
}

改成用 clamp() 就是：

div{
  width: clamp(640px, 100%, 960px);
}

這樣就會設定預設為 100%，但長度是在 640px 到 960px 之間變化。

用 max()、min() 跟 clamp() 可以簡化我們 CSS 的寫法，有興趣的也可以嘗試看看。