在 CSS 中，其實存在各種各樣的函式，具體分為：
- Transform functions
- Math functions
- Filter functions
- Color functions
- Image functions
- Counter functions
- Font functions
- Shape functions
- Reference functions
- CSS grid functions
本文，將具體介紹其中的 CSS 數學函式（Math functions）中，已經被瀏覽器大規模支持的 4 個：
- calc()
- min()
- max()
- clamp()
為什么說是被瀏覽器大規模支持的？因為除了這 4 個目前已經得到大規模支持的數學函式外，其實規范 CSS Values and Units Module Level 4 已經定義了諸如三角函式相關 sin()、cos()、tan() 等，指數函式相關 pow()、sqrt() 等等數學函式，只是目前都處于實驗室階段，還沒有瀏覽器支持它們，需要給時間一點時間，
Calc()
calc() 此 CSS 函式允許在宣告 CSS 屬性值時執行一些計算，
語法類似于
{
width: calc(100% - 80px);
}
一些需要注意的點：
+和-運算子的兩邊必須要有空白字符，比如，calc(50% -8px)會被決議成為一個無效的運算式，必須寫成calc(8px + -50%)*和/這兩個運算子前后不需要空白字符，但如果考慮到統一性，仍然推薦加上空白符- 用 0 作除數會使 HTML 決議器拋出例外
- 涉及自動布局和固定布局的表格中的表列、表列組、表行、表行組和表單元格的寬度和高度百分比的數學運算式，auto 可視為已指定，
- calc() 函式支持嵌套，但支持的方式是：把被嵌套的 calc() 函式全當成普通的括號，（所以，函式內直接用括號就好了，）
- calc() 支持與 CSS 變數混合使用
看一個最常見的例子，頁面結構如下：
<div >
<div >Content</div>
<div >Footer</div>
</div>
頁面的 g-footer 高為 80px，我們希望不管頁面多長，g-content 部分都可以占滿剩余空間，像是這樣：
這種布局使用 flex 的彈性布局可以輕松實作，當然，也可以使用 calc() 實作：
.g-container {
height: 100vh;
}
.g-content {
height: calc(100vh - 80px);
}
.g-footer {
height: 80px;
}
下面羅列一些 Calc() 的進階技巧，
Calc 中的加減法與乘除法的差異
注意，calc() 中的加減法與乘除法的差異：
{
font-size: calc(1rem + 10px);
width: calc(100px + 10%);
}
可以看到，加減法兩邊的運算元都是需要單位的，而乘除法，需要一個無單位數，僅僅表示一個倍率：
{
width: calc(100% / 7);
animation-delay: calc(1s * 3);
}
Calc 的嵌套
calc() 函式是可以嵌套使用的，像是這樣：
{
width: calc(100vw - calc(100% - 64px));
}
此時，內部的 calc() 函式可以退化寫成一個括號即可 ()，所以上述代碼等價于：
{
width: calc(100vw - (100% - 64px));
}
也就是嵌套內的 calc()，calc 幾個函式字符可以省略，
Calc 內不同單位的混合運算
calc() 支持不同單位的混合運算，對于長度，只要是屬于長度相關的單位都可以進行混合運算，包含這些：
- px
- %
- em
- rem
- in
- mm
- cm
- pt
- pc
- ex
- ch
- vh
- vw
- vmin
- vmax
這里有一個有意思的點，運算肯定是消耗性能的，早年間，有這樣一段 CSS 代碼，可以直接讓 Chrome 瀏覽器崩潰 Crash：
<div></div>
CSS 樣式如下：
div {
--initial-level-0: calc(1vh + 1% + 1px + 1em + 1vw + 1cm);
--level-1: calc(var(--initial-level-0) + var(--initial-level-0));
--level-2: calc(var(--level-1) + var(--level-1));
--level-3: calc(var(--level-2) + var(--level-2));
--level-4: calc(var(--level-3) + var(--level-3));
--level-5: calc(var(--level-4) + var(--level-4));
--level-6: calc(var(--level-5) + var(--level-5));
--level-7: calc(var(--level-6) + var(--level-6));
--level-8: calc(var(--level-7) + var(--level-7));
--level-9: calc(var(--level-8) + var(--level-8));
--level-10: calc(var(--level-9) + var(--level-9));
--level-11: calc(var(--level-10) + var(--level-10));
--level-12: calc(var(--level-11) + var(--level-11));
--level-13: calc(var(--level-12) + var(--level-12));
--level-14: calc(var(--level-13) + var(--level-13));
--level-15: calc(var(--level-14) + var(--level-14));
--level-16: calc(var(--level-15) + var(--level-15));
--level-17: calc(var(--level-16) + var(--level-16));
--level-18: calc(var(--level-17) + var(--level-17));
--level-19: calc(var(--level-18) + var(--level-18));
--level-20: calc(var(--level-19) + var(--level-19));
--level-21: calc(var(--level-20) + var(--level-20));
--level-22: calc(var(--level-21) + var(--level-21));
--level-23: calc(var(--level-22) + var(--level-22));
--level-24: calc(var(--level-23) + var(--level-23));
--level-25: calc(var(--level-24) + var(--level-24));
--level-26: calc(var(--level-25) + var(--level-25));
--level-27: calc(var(--level-26) + var(--level-26));
--level-28: calc(var(--level-27) + var(--level-27));
--level-29: calc(var(--level-28) + var(--level-28));
--level-30: calc(var(--level-29) + var(--level-29));
--level-final: calc(var(--level-30) + 1px);
border-width: var(--level-final);
border-style: solid;
}
可以看到，從 --level-1 到 --level-30，每次的運算量都是成倍的增長，最終到 --level-final 變數，展開將有 2^30 = 1073741824 個 --initial-level-0 運算式的內容，
并且，每個 --initial-level-0 運算式的內容 -- calc(1vh + 1% + 1px + 1em + 1vw + 1cm)，在瀏覽器決議的時候，也已經足夠復雜，
混合在一起，就導致了瀏覽器的 BOOM（Chrome 70之前的版本），為了能看到效果，我們將上述樣式賦給某個元素被 hover 的時候，得到如下效果：
當然，這個 BUG 目前已經被修復了，我們也可以通過這個小 DEMO 了解到，一是 calc 是可以進行不同單位的混合運算的，另外一個就是注意具體使用的時候如果計算量巨大，可能會導致性能上較大的消耗，
當然，不要將長度單位和非長度單位混合使用，像是這樣：
{
animation-delay: calc(1s + 1px);
}
Calc 搭配 CSS 自定義變數使用
calc() 函式非常重要的一個特性就是能夠搭配 CSS 自定義以及 CSS @property 變數一起使用，
最簡單的一個 DEMO：
:root {
--width: 10px;
}
div {
width: calc(var(--width));
}
當然，這樣看上去，根本看不出這樣的寫法的作用，好像沒有什么意義，實際應用場景中，會比上述的 DEMO 要稍微復雜一些，
假設我們要實作這樣一個 loading 影片效果，一開始只有 3 個球：
可能的寫法是這樣，我們給 3 個球都添加同一個旋轉影片，然后分別控制他們的 animation-delay：
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
.item:nth-child(1) {
animation: rotate 3s infinite linear;
}
.item:nth-child(2) {
animation: rotate 3s infinite -1s linear;
}
.item:nth-child(3) {
animation: rotate 3s infinite -2s linear;
}
如果有一天，這個影片需要擴展成 5 個球的話，像是這樣：
我們就不得已，得去既添加 HTML，又修改 CSS，而如果借助 Calc 和 CSS 變數，這個場景就可以稍微簡化一下，
假設只有 3 個球：
<div >
<div style="--delay: 0"></div>
<div style="--delay: 1"></div>
<div style="--delay: 2"></div>
</div>
我們通過 HTML 的 Style 標簽，傳入 --delay 變數，在 CSS 中直接使用它們：
.g-item {
animation: rotate 3s infinite linear;
animation-delay: calc(var(--delay) * -1s);
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
而當影片修改成 5 個球時，我們就不需要修改 CSS，直接修改 HTML 即可，像是這樣：
<div >
<div style="--delay: 0"></div>
<div style="--delay: 0.6"></div>
<div style="--delay: 1.2"></div>
<div style="--delay: 1.8"></div>
<div style="--delay: 2.4"></div>
</div>
核心的 CSS 還是這一句，不需要做任何修改：
{
animation-delay: calc(var(--delay) * -1s);
}
完整的 DEMO，你可以戳這里：CodePen Demo -- Calc & CSS Variable Demo
calc 搭配自定義變數時候的默認值
還是上述的 Loading 影片效果，如果我的 HTML 標簽中，有一個標簽忘記填充 --delay 的值了，那會發生什么？
像是這樣：
<div >
<div style="--delay: 0"></div>
<div style="--delay: 0.6"></div>
<div ></div>
<div style="--delay: 1.8"></div>
<div style="--delay: 2.4"></div>
</div>
{
animation-delay: calc(var(--delay) * -1s);
}
由于 HTML 標簽沒有傳入 --delay 的值，并且在 CSS 中向上查找也沒找到對應的值，此時，animation-delay: calc(var(--delay) * -1s) 這一句其實是無效的，相當于 animation-delay: 0，效果也就是少了個球的效果：
所以，基于這種情況，可以利用 CSS 自定義變數 var() 的 fallback 機制：
{
// (--delay, 1) 中的 1 是個容錯機制
animation-delay: calc(var(--delay, 1) * -1s);
}
此時，如果沒有讀取到任何 --delay 值，就會使用默認的 1 與 -1s 進行運算，
Calc 字串拼接
很多人在使用 CSS 的時候，會嘗試字串的拼接，像是這樣：
<div style="--url: 'bsBD1I.png'"></div>
:root {
--urlA: 'url(https://s1.ax1x.com/2022/03/07/';
--urlB: ')';
}
div {
width: 400px;
height: 400px;
background-image: calc(var(--urlA) + var(--url) + var(--urlB));
}
這里想利用 calc(var(--urlA) + var(--url) + var(--urlB)) 拼出完整的在 background-image 中可使用的 URL url(https://s1.ax1x.com/2022/03/07/bsBD1I.png)，
然而，這是不被允許的（無法實作的），calc 的沒有字串拼接的能力，
唯一可能完成字串拼接的是在元素的偽元素的 content 屬性中，但是也不是利用 calc，
來看這樣一個例子，這是錯誤的：
:root {
--stringA: '123';
--stringB: '456';
--stringC: '789';
}
div::before {
content: calc(var(--stringA) + var(--stringB) + var(--stringC));
}
此時，不需要 calc，直接使用自定義變數相加即可，
因此，正確的寫法：
:root {
--stringA: '123';
--stringB: '456';
--stringC: '789';
}
div::before {
content: var(--stringA) + var(--stringB) + var(--stringC);
}
此時，內容可以正常展示：
再強調一下，calc 的沒有字串拼接的能力，如下的使用方式都是無法被識別的錯誤語法：
.el::before {
// 不支持字串拼接
content: calc("My " + "counter");
}
.el::before {
// 更不支持字串乘法
content: calc("String Repeat 3 times" * 3);
}
min()、max()、clamp()
min()、max()、clamp() 適合放在一起講，它們的作用彼此之間有所關聯，
- max()：從一個逗號分隔的運算式串列中選擇最大（正方向）的值作為屬性的值
- min()：從一個逗號分隔的運算式串列中選擇最小的值作為屬性的值
- clamp()：把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用
由于在現實中，有非常多元素的的屬性不是一成不變的，而是會根據背景關系、環境的變化而變化，
譬如這樣一個布局：
<div ></div>
.container {
height: 100px;
background: #000;
}
效果如下，.container 塊它會隨著螢屏的增大而增大，始終占據整個螢屏：
對于一個回應式的專案，我們肯定不希望它的寬度會一直變大，而是當達到一定的閾值時，寬度從相對單位變成了絕對單位，這種情況就適用于 min()，簡單改造下代碼：
.container {
width: min(100%, 500px);
height: 100px;
background: #000;
}
容器的寬度值會在 width: 100% 與 width: 500px 之間做選擇，選取相對小的那個，
在螢屏寬度不足 500px 時候，也就表現為 width: 100%，反之，則表現為 width: 500px：
同理，在類似的場景，我們也可以使用 max() 從多個值中，選取相對更大的值，
min()、max() 支持多個值的串列
min()、max() 支持多個值的串列，譬如 width: max(1px, 2px, 3px, 50px)，
當然，對于上述表達：
width: max(1px, 2px, 3px, 50px) 其實等于 width: 50px，因此，對于 min()、max() 的具體使用而言，最多應該只包含一個具體的絕對單位，否則，這樣的像上述這種代碼，雖然語法支持，但是任何情況下，計算值都是確定的，其實沒有意義，
配合 calc
min()、max()、clamp() 都可以配合 calc 一起使用，
譬如：
div {
width: max(50vw, calc(300px + 10%));
}
在這種情況下，calc 和相應包裹的括號可以省略，因此，上述代碼又可以寫成：
div {
width: max(50vw, 300px + 10%);
}
基于 max、min 模擬 clamp
現在，有這樣一種場景，如果，我們又需要限制最大值，也需要限制最小值，怎么辦呢？
像是這樣一個場景，**字體的大小，最小是 12px，隨著螢屏的變大，逐漸變大，但是為了避免老人機現象（隨著螢屏變大，無限制變大），我們還需要限制一個最大值 20px，
我們可以利用 vw 來實作給字體賦動態值，假設在移動端，設備寬度的 CSS 像素為 320px 時，頁面的字體寬度最小為 12px，換算成 vw 即是 320 / 100 = 3.2，也就是 1vw 在 螢屏寬度為 320px 時候，表現為 3.2px，12px 約等于 3.75 vw，
同時，我們需要限制最大字體值為 20px，對應的 CSS 如下：
p {
font-size: max(12px, min(3.75vw, 20px));
}
看看效果：
通過 max()、min() 的配合使用，以及搭配一個相對單位 vw，我們成功的給字體設定了上下限，而在這個上下限之間實作了動態變化，
當然，上面核心的這一段 max(12px, min(3.75vw, 20px)) 看上去有點繞，因此，CSS 推出了 clamp() 簡化這個語法，下面兩個寫法是等價的：
p {
font-size: max(12px, min(3.75vw, 20px));
// 等價于
font-size: clamp(12px, 3.75vw, 20px);
}
clamp()
clamp() 函式的作用是把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用，它接收三個引數：最小值、首選值、最大值，
有意思的是，clamp(MIN, VAL, MAX) 其實就是表示 max(MIN, min(VAL, MAX))，
使用 vw 配合 clamp 實作回應式布局
我們繼續上面的話題，
在不久的過去，移動端的適配方面，使用更多的 rem 適配方案，可能會借助一些現成的庫，類似于 flexible.js、hotcss.js 等庫，rem 方案比較大的一個問題在于需要一段 JavaScript 回應視口變化，重設根元素的 font-size，并且，使用 rem 多少有點 hack 的感覺，
在現在，在移動端適配，我們更為推崇的是 vw 純 CSS 方案，與 rem 方案類似，它的本質也是頁面的等比例縮放，它的一個問題在于，如果僅僅使用 vw，隨著螢屏的不斷變大或者縮小，內容元素將會一直變大變小下去，這也導致了在大螢屏下，許多元素看著實在太大了！
因此，我們需要一種能夠控制最大、最小閾值的方式，像是這樣：
此時，clamp 就能非常好的派上用場，還是我們上述的例子，這一段代碼 font-size: clamp(12px, 3.75vw, 20px)，就能將字體限制在 12px - 20px 的范圍內，
因此，對于移動端頁面而言，所有涉及長度的單位，我們都可以使用 vw 進行設定，而諸如字體、內外邊距、寬度等不應該完全等比例縮放的，采用 clamp() 控制最大最小閾值，
在 Modern Fluid Typography Using CSS Clamp 一文中，對使用 clamp() 進行流式回應式布局還有更為深入的探討，感興趣的可以深入閱讀，
總結一下，對于移動端頁面，我們可以以 vw 配合 clamp() 的方式，?完成整個移動端布局的適配，它的優勢在于：
- 沒有額外 JavaScript 代碼的引入，純 CSS 解決方案
- 能夠很好地控制邊界閾值，合理的進行縮放展示
反向回應式變化
還有一個技巧，利用 clamp() 配合負值，我們也可以反向操作，得到一種螢屏越大，字體越小的反向回應式效果：
p {
font-size: clamp(20px, -5vw + 96px, 60px);
}
看看效果：
這個技巧挺有意思的，由于 -5vw + 96px 的計算值會隨著螢屏的變小而增大，實作了一種反向的字體回應式變化，
總結
總結一下，合理運用 min()、max()、clamp()，是構建現代回應式布局的重點，我們可以告別傳統的需要 JavaScript 輔助的一些方案，基于 CSS 這些數學函式即可完成所有的訴求，
一些進階閱讀非常好的文章：
- A guide to the min(), max(), and clamp() CSS functions
- Modern Fluid Typography Using CSS Clamp
最后
好了，本文到此結束，希望本文對你有所幫助 ??
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/472380.html
標籤：Html/Css
上一篇：vue - Vuex