一文學會使用 CSS 中的 min(), max(), clamp() 以及它們的使用場景
2020年4月8日，Firefox瀏覽器支持了 CSS 比較函數(min()，max()，clamp())，這意味著現在所有主流瀏覽器都支持它們。這些CSS函數最大的作用就是可以為我們提供動態布局和更靈活設計組件方法。
簡單的這些元素主要用來設置元素尺寸，如容器大小，字體大小，內距，外距等等 。在這篇文章中，我將用一些示例和大家一起來探討這幾個函數在實際中的使用，希望能更好的幫助大家理解它們。
兼容性
min 和 max 的支持情況：
clamp()的支持情況：
CSS 比較函數
根據CSS規范，比較函數是關于比較多個值并取其一的操作，我們來研究一下函數。
Min() 函數
min() 函數支持一個或多個表達式，每個表達式之間使用逗號分隔，然后以最小的表達式的值作為返回值，我們可以使用min()為元素設置最大值。
考慮下面的例子，我們希望元素的最大寬度為500px。
- .element {
- width: min(50%, 500px);
- }
瀏覽器需要在(50%，500px) 取一個最小值，因為有個百分比，所以最終結果取決于視口寬度。如果50%的計算值大于500px，那么就取 500px。
否則，如果50%計算值小于500px，則50%將用作寬度的值，假設視口的寬度是900px， 最終元素的寬度為 900px x 50% = 450px。
下面是一個交互的動畫為了讓大家更好的理解：
事例源碼：https://codepen.io/shadeed/debug/f5e338c8a1c7cd29e382c72a5eb37e48/auth
Max() 函數max()函數和min()函數語法類似，區別在于max()函數返回的是最大值，min()函數返回的是最小值。同樣，我們可以使用man()為元素設置最小值。
考慮下面的例子，我們希望元素的最小寬度為500px。
- .element {
- width: max(50%, 500px);
- }
瀏覽器需要在(50%，500px) 取一個最大值，因為有個百分比，所以最終結果取決于視口寬度。如果50%的計算值小于500px，那么就取 500px。
否則，如果50%計算值大于500px，則50%將用作寬度的值，假設視口的寬度是1150px， 最終元素的寬度為 1150px x 50% = 575px。
事例源碼：https://cdpn.io/shadeed/debug/cca927df45964fbe1a8342ad3ace6d71
Clamp() 函數
clamp()函數作用是返回一個區間范圍的值。語法如下：
- clamp(MIN, VAL, MAX)
其中MIN表示最小值，VAL表示首選值，MAX表示最大值。意思是，如果VAL在MIN和MAX范圍之間，則使用VAL作為函數返回值;如果VAL大于MAX，則使用MAX作為返回值;如果VAL小于MIN，則使用MIN作為返回值。
clamp(MIN, VAL, MAX)實際上等同于max(MIN, min(VAL, MAX))。
考慮下面的例子
- .element {
- width: clamp(200px, 50%, 1000px);
- }
假設我們有一個元素，其最小寬度為200px，首選值為50%，最大值為1000px,如下所示：
上面的計算過程是這樣的：
- 寬度永遠不會低于200px
- 內容中間首選值是50%，只有在視口寬度大于400px小于2000px時才有效
- 寬度不會超過 1000px
事例源碼：https://codepen.io/shadeed/pen/924419f15bfdcf0cd0103b0587524b0b?editors=0010
上下文很重要
計算值取決于上下文。可能是%，em，rem，vw/vh。甚至百分比值也可以基于視口寬度(如果元素直接位于中)，也可以基于其父元素。
數學表達式
值得一提的是， clamp() 函數也可以用于數學表達式，而不必借助于 calc()，如下代碼所示：
- .type {
- /* 強制字體大小保持在 12px 到 100px 之間 */
- font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
- }
用例
側邊欄和主界面
通常，頁面的側邊欄是固定的，主界面度是靈活的。如果視口足夠大，我們可以根據視口的大小動態增加側邊欄寬度，這里我們可以使用max()函數為其設置最小寬度。
考慮下面的示例:
- .wrapper {
- display: flex;
- }
- aside {
- flex-basis: max(30vw, 150px);
- }
- main {
- flex-grow: 1;
- }
如果視口大于 500px，則側邊欄的最小寬度為150px(500 * 30% = 150)。
事例源碼：https://codepen.io/shadeed/pen/7f9558f31fdf60bc08c827817c10bf3a?editors=1100
標題字體大小
clamp()的一個很好的用例是用于標題。假設我們希望標題的最小大小為16px，最大大小為50px。clamp()函數將為我們提供一個介于兩者之間的值。
- .title {
- font-size: clamp(16px, 5vw, 50px);
- }
在這里使用clamp()是非常適合的，因為它確保了所使用的字體大小是可訪問的和易于閱讀的。如果換做min()，那么就不能在小的視圖中控制字體了。
- .title {
- font-size: min(3vw, 24px); /* Not recommended, bad for accessibility */
- }
在移動端，字體大小很小。因此，不要對字體大小使用min()函數。當然，我們也可以通過媒體查詢來適配，但是這樣就錯過了一次使用** CSS 比較函數**實戰。
如前所述，可以在max()函數中嵌套min()來實現clamp() 效果，該函數將模仿clamp()函數，如下所示：
- .title {
- font-size: max(16px, min(10vw, 50px));
- }
事例源碼：https://codepen.io/shadeed/pen/db76480260c104df00c65991df90a203?editors=1100
裝飾性標題
注意看上圖標題下面有一個大的半透明的標題，這是一個裝飾性的文本，根據視窗的大小來縮放。我們可以使用max()函數和CSS viewport單元來設置它的最小值。
- .section-title:before {
- content: attr(data-test);
- font-size: max(13vw, 50px);
- }
源碼: https://codepen.io/shadeed/pen/e0128b73de7c84cb9b98cf733a3835c4?editors=1100
平滑漸變
當在CSS中使用漸變時，你可能需要對它進行一些調整，使顏色之間的過渡更加平滑。我們先看看下面的漸變：
- .element {
- background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
- }
注意移動的過渡是有一條比較明顯的線分開，這是不好的。我們可以通過使用媒體查詢來解決這個問題：
- @media (max-width: 700px) {
- .element {
- background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
- }
- }
有一種更加簡潔的方法就是使用 min() 函數，如下 所示：
- .element {
- background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
- }
事例源碼：https://codepen.io/shadeed/pen/2c4bf2ded32f66390fdef13409be4a10?editors=1100
透明漸變
當需要在圖片上放置文本時，我們應該在圖片上加層漸變讓文本更加可讀。與上一個示例類似，漸變大小應該在小視圖和大視圖之間有所不同。見下圖：
- .element {
- background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
- }
事例源碼：https://codepen.io/shadeed/pen/babf1bfd4c85eeb1b6f9f549dd0fe602?editors=1100
容器寬度
如果有一個容器，它的寬度應該是它父容器的80%，但不能超過780px，你會用什么?通常，你應該會用max-width，如下所示：
- .container {
- max-width: 780px;
- width: 80%;
- }
這里使用 min()函數也可以為元素設置最大值：
- .container {
- max-width: min(80%, 780px);
- }
事例源碼：https://codepen.io/shadeed/pen/3d8b44709b04efdd7336fe91363e3d76?editors=1100
本文轉載自微信公眾號「 大遷世界」，可以通過以下二維碼關注。轉載本文請聯系 大遷世界公眾號。
