深入理解 CSS 的 max、min、clamp、calc

隨著 CSS 的進化,出現了許多和數學函數相關的功能,這篇文章會介紹 max()、min()、clamp() 和 calc() 這四個好用的功能符號 ( Functional Notations ),可以應用在長度、角度...等各種屬性,進行動態的數學函數運算,讓網頁設計更加靈活以及具有彈性。

CSS 的功能符號 ( Functional Notations )

功能符號是一種藉由數學函數計算而產生的數值,可以使用在較為複雜的類型或版面設計,功能符號的語法是以「數學函數名稱開頭,緊隨其後是左右括號 ( 例如max()calc() ),括號內可以採用多個參數」,格式和單位和 CSS 屬性值相同,各個參數採用逗號分隔。

除了這篇文章要介紹的四個功能符號,CSS 還定義了其他特別的功能,例如toggle()( 抓取 toggle 事件 )、attr()( 抓取元素屬性 )、round()mod()rem()sin()cos()tan()asin()acos()atan()atan2()...等,不過截至這篇文章寫完的時候,上述這些都還沒有支援,所以只好等待之後支援的時候再來測試了。

  • 注意 1、數學運算性質的功能符號,最後得到的結果一定會有「單位」( px、%、deg...等 ),目前單位無法像 JavaScript 用字串的方式添加。( 未來會支援 )

  • 注意 2、數學式的「相乘/相除」,會把「單位一起相乘或相除」,例如10px * 10px會發生錯誤。

max()

max()定義了一個數學運算最大值,括號內可以包含多個數值,使用逗號分隔,計算後得到的值就是多個數值的「最大值」。舉例來說,如果有個 div 寬度是 80vw,但鎖定最小寬度為 200px。( 80vw 代表視窗寬度的 80% )

過去的寫法:

div{
  width:80vw;
  min-width:200px;
}

換成max()之後:

div{
  width:max(80vw, 200px); //寬度最小是 200px,否則就使用 80vw
}

深入理解 CSS max()、min()、clamp()、calc()

因為max()是數學函數,可以在括號內進行數學式的運算 ( 注意 CSS 的算式之間必須有空白 ),下方的例子可以讓 h1 自動變換文字大小。

h1{
  font-size:max(10 * (1vw + 1vh) / 2, 12px);
}

深入理解 CSS max()、min()、clamp()、calc()

min()

min()定義了一個數學運算的最小值,括號內可以包含多個數值,使用逗號分隔,計算後得到的值就是多個數值的「最小值」。舉例來說,如果有個 div 寬度是 80vw,但鎖定最最大寬度為 200px。

過去的寫法:

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

換成min()之後:

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

深入理解 CSS max()、min()、clamp()、calc()

clamp()

clamp()包含三個數值,定義「最大值、最小值以及中間的數值」,效果等同於:

max(最小值, min(val, 最大值));

舉例來說,要把某個寬度 100vw 的 div,鎖定在 100px 到 300px 之間。

過去的寫法:

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

換成clamp()之後:

div{
  clamp(200px, 100%, 300px);
}

深入理解 CSS max()、min()、clamp()、calc()

calc()

calc()主要作為計算使用,可以和max()min()clamp或是 CSS 的變數互相搭配,例如有一個 div,最大寬度是 80vw - 50px 或 150px,可以採用搭配變數的寫法:

:root{
  --w:min(200px, 80vw);
}
div {
  height: 50px;
  width:calc(var(--w) - 50px);
}

深入理解 CSS max()、min()、clamp()、calc()

參考

有興趣瞧瞧其他新文章嗎?