一文學會使用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
邊界與陰影
在一些設計案例中，如果元素邊框的寬度和弧度比較大時，在移動時應儘量減小。透過使用clamp（），我們可以根據視窗寬度使其動態。
。element { box-shadow： 0 3px 10px 0 red； border： min（1vw， 10px） solid #468eef； border-radius： clamp（7px， 2vw， 20px）； box-shadow： 0 3px clamp（5px， 4vw， 50px） 0 rgba（0， 0， 0， 0。2）；}
事例原始碼：https：//codepen。io/shadeed/pen/7b5c7979e09573ca32150ebfc7f74a66？editors=1100
Grid Gap
在一個使用風格佈局的介面上，如果我們想根據視口大小來調整網格之間的間距，使用 clamp（） 是很容易做到的：
。wrapper { display： grid； grid-template-columns： repeat（auto-fit， minmax（200px， 1fr））； grid-gap： clamp（1rem， 2vw， 24px）；}
事例原始碼：https：//codepen。io/shadeed/pen/a14c7d9fcbbae84340a4f83833294f5b？editors=1100
如果在不相容瀏覽器使用這些方法
與任何新的 CSS 函式一樣，提供後退方案是很重要的。要實現這一點，我們可以使用以下方法之一：
1.手動添加回退方案
我們可以在使用
比較函式
之前加一個預設的方式，如下所示：
。hero { padding： 4rem 1rem； padding： clamp（2rem， 10vmax， 10rem） 1rem；}
支援的瀏覽器將忽略第一個，不支援的將使用第一個padding。
使用 CSS @supports
我們可以使用@supports檢測瀏覽器是否支援 CSS 比較函式，如下所示：
。hero { /* 預設值，用於不支援的瀏覽器 */ padding： 4rem 1rem；}@supports （width： min（10px， 5vw）） { /* 用於支援的瀏覽器 */ 。hero { padding： clamp（2rem， 10vmax， 10rem） 1rem； }}
作者：Ahmad shaded 譯者：前端小智 來源：sitepoint 原文：https：//heydesigner。com/everything-i-learned-about-min-max-clamp-in-css/
