深入理解 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
}
因為max()
是數學函數,可以在括號內進行數學式的運算 ( 注意 CSS 的算式之間必須有空白 ),下方的例子可以讓 h1 自動變換文字大小。
h1{
font-size:max(10 * (1vw + 1vh) / 2, 12px);
}
min()
min()
定義了一個數學運算的最小值,括號內可以包含多個數值,使用逗號分隔,計算後得到的值就是多個數值的「最小值」。舉例來說,如果有個 div 寬度是 80vw,但鎖定最最大寬度為 200px。
過去的寫法:
div{
width:80vw;
max-width:200px;
}
換成min()
之後:
div{
width:min(80vw, 200px);
}
clamp()
clamp()
包含三個數值,定義「最大值、最小值以及中間的數值」,效果等同於:
max(最小值, min(val, 最大值));
舉例來說,要把某個寬度 100vw 的 div,鎖定在 100px 到 300px 之間。
過去的寫法:
div{
width: 100%;
min-width:200px;
max-width:300px;
}
換成clamp()
之後:
div{
clamp(200px, 100%, 300px);
}
calc()
calc()
主要作為計算使用,可以和max()
、min()
、clamp
或是 CSS 的變數互相搭配,例如有一個 div,最大寬度是 80vw - 50px 或 150px,可以採用搭配變數的寫法:
:root{
--w:min(200px, 80vw);
}
div {
height: 50px;
width:calc(var(--w) - 50px);
}