2020年4月8日，F(xiàn)irefox瀏覽器支持了 CSS 比較函數(shù)(min()，max()，clamp())，這意味著現(xiàn)在所有主流瀏覽器都支持它們。這些CSS函數(shù)最大的作用就是可以為我們提供動(dòng)態(tài)布局和更靈活設(shè)計(jì)組件方法。

簡(jiǎn)單的這些元素主要用來(lái)設(shè)置元素尺寸，如容器大小，字體大小，內(nèi)距，外距等等 。在這篇文章中，我將用一些示例和大家一起來(lái)探討這幾個(gè)函數(shù)在實(shí)際中的使用，希望能更好的幫助大家理解它們。

兼容性

min 和 max 的支持情況：

clamp()的支持情況：

CSS 比較函數(shù)

根據(jù)CSS規(guī)范，比較函數(shù)是關(guān)于比較多個(gè)值并取其一的操作，我們來(lái)研究一下函數(shù)。

Min() 函數(shù)

min() 函數(shù)支持一個(gè)或多個(gè)表達(dá)式，每個(gè)表達(dá)式之間使用逗號(hào)分隔，然后以最小的表達(dá)式的值作為返回值，我們可以使用min()為元素設(shè)置最大值。

考慮下面的例子，我們希望元素的最大寬度為500px。

.element { 
    width: min(50%, 500px); 
} 

瀏覽器需要在(50%，500px) 取一個(gè)最小值，因?yàn)橛袀€(gè)百分比，所以最終結(jié)果取決于視口寬度。如果50%的計(jì)算值大于500px，那么就取 500px。

否則，如果50%計(jì)算值小于500px，則50%將用作寬度的值，假設(shè)視口的寬度是900px， 最終元素的寬度為 900px x 50% = 450px。

下面是一個(gè)交互的動(dòng)畫為了讓大家更好的理解：

事例源碼：https://codepen.io/shadeed/debug/f5e338c8a1c7cd29e382c72a5eb37e48/auth

Max() 函數(shù)max()函數(shù)和min()函數(shù)語(yǔ)法類似，區(qū)別在于max()函數(shù)返回的是最大值，min()函數(shù)返回的是最小值。同樣，我們可以使用man()為元素設(shè)置最小值。

考慮下面的例子，我們希望元素的最小寬度為500px。

.element { 
    width: max(50%, 500px); 
} 

瀏覽器需要在(50%，500px) 取一個(gè)最大值，因?yàn)橛袀€(gè)百分比，所以最終結(jié)果取決于視口寬度。如果50%的計(jì)算值小于500px，那么就取 500px。

否則，如果50%計(jì)算值大于500px，則50%將用作寬度的值，假設(shè)視口的寬度是1150px， 最終元素的寬度為 1150px x 50% = 575px。

事例源碼：https://cdpn.io/shadeed/debug/cca927df45964fbe1a8342ad3ace6d71

Clamp() 函數(shù)

clamp()函數(shù)作用是返回一個(gè)區(qū)間范圍的值。語(yǔ)法如下：

clamp(MIN, VAL, MAX) 

其中MIN表示最小值，VAL表示首選值，MAX表示最大值。意思是，如果VAL在MIN和MAX范圍之間，則使用VAL作為函數(shù)返回值;如果VAL大于MAX，則使用MAX作為返回值;如果VAL小于MIN，則使用MIN作為返回值。

clamp(MIN, VAL, MAX)實(shí)際上等同于max(MIN, min(VAL, MAX))。

考慮下面的例子

.element { 
    width: clamp(200px, 50%, 1000px); 
} 

假設(shè)我們有一個(gè)元素，其最小寬度為200px，首選值為50%，最大值為1000px,如下所示：

上面的計(jì)算過程是這樣的：

• 寬度永遠(yuǎn)不會(huì)低于200px
• 內(nèi)容中間首選值是50%，只有在視口寬度大于400px小于2000px時(shí)才有效
• 寬度不會(huì)超過 1000px

事例源碼：https://codepen.io/shadeed/pen/924419f15bfdcf0cd0103b0587524b0b?editors=0010

上下文很重要

計(jì)算值取決于上下文?？赡苁?，em，rem，vw/vh。甚至百分比值也可以基于視口寬度(如果元素直接位于中)，也可以基于其父元素。

數(shù)學(xué)表達(dá)式

值得一提的是， clamp() 函數(shù)也可以用于數(shù)學(xué)表達(dá)式，而不必借助于 calc()，如下代碼所示：

.type { 
  /* 強(qiáng)制字體大小保持在 12px 到 100px 之間 */ 
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px); 
} 

用例

側(cè)邊欄和主界面

通常，頁(yè)面的側(cè)邊欄是固定的，主界面度是靈活的。如果視口足夠大，我們可以根據(jù)視口的大小動(dòng)態(tài)增加側(cè)邊欄寬度，這里我們可以使用max()函數(shù)為其設(shè)置最小寬度。

考慮下面的示例:

.wrapper { 
    display: flex; 
} 
 
aside { 
  flex-basis: max(30vw, 150px); 
} 
 
main { 
  flex-grow: 1; 
} 

如果視口大于 500px，則側(cè)邊欄的最小寬度為150px(500 * 30% = 150)。

事例源碼：https://codepen.io/shadeed/pen/7f9558f31fdf60bc08c827817c10bf3a?editors=1100

標(biāo)題字體大小

clamp()的一個(gè)很好的用例是用于標(biāo)題。假設(shè)我們希望標(biāo)題的最小大小為16px，最大大小為50px。clamp()函數(shù)將為我們提供一個(gè)介于兩者之間的值。

.title { 
    font-size: clamp(16px, 5vw, 50px); 
} 

在這里使用clamp()是非常適合的，因?yàn)樗_保了所使用的字體大小是可訪問的和易于閱讀的。如果換做min()，那么就不能在小的視圖中控制字體了。

.title { 
    font-size: min(3vw, 24px); /* Not recommended, bad for accessibility */ 
} 

在移動(dòng)端，字體大小很小。因此，不要對(duì)字體大小使用min()函數(shù)。當(dāng)然，我們也可以通過媒體查詢來(lái)適配，但是這樣就錯(cuò)過了一次使用** CSS 比較函數(shù)**實(shí)戰(zhàn)。

如前所述，可以在max()函數(shù)中嵌套min()來(lái)實(shí)現(xiàn)clamp() 效果，該函數(shù)將模仿clamp()函數(shù)，如下所示：

.title { 
    font-size: max(16px, min(10vw, 50px)); 
} 

事例源碼：https://codepen.io/shadeed/pen/db76480260c104df00c65991df90a203?editors=1100

裝飾性標(biāo)題

注意看上圖標(biāo)題下面有一個(gè)大的半透明的標(biāo)題，這是一個(gè)裝飾性的文本，根據(jù)視窗的大小來(lái)縮放。我們可以使用max()函數(shù)和CSS viewport單元來(lái)設(shè)置它的最小值。

.section-title:before { 
  content: attr(data-test); 
  font-size: max(13vw, 50px); 
} 

源碼: https://codepen.io/shadeed/pen/e0128b73de7c84cb9b98cf733a3835c4?editors=1100

平滑漸變

當(dāng)在CSS中使用漸變時(shí)，你可能需要對(duì)它進(jìn)行一些調(diào)整，使顏色之間的過渡更加平滑。我們先看看下面的漸變：

.element { 
    background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db); 
} 

注意移動(dòng)的過渡是有一條比較明顯的線分開，這是不好的。我們可以通過使用媒體查詢來(lái)解決這個(gè)問題：

@media (max-width: 700px) { 
    .element { 
        background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db) 
    } 
} 

有一種更加簡(jiǎn)潔的方法就是使用 min() 函數(shù)，如下 所示：

.element { 
    background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db); 
} 

事例源碼：https://codepen.io/shadeed/pen/2c4bf2ded32f66390fdef13409be4a10?editors=1100

透明漸變

當(dāng)需要在圖片上放置文本時(shí)，我們應(yīng)該在圖片上加層漸變讓文本更加可讀。與上一個(gè)示例類似，漸變大小應(yīng)該在小視圖和大視圖之間有所不同。見下圖：

.element { 
    background: linear-gradient(to top, #000 0, transparent max(20%, 20vw)); 
} 

事例源碼：https://codepen.io/shadeed/pen/babf1bfd4c85eeb1b6f9f549dd0fe602?editors=1100

容器寬度

如果有一個(gè)容器，它的寬度應(yīng)該是它父容器的80%，但不能超過780px，你會(huì)用什么?通常，你應(yīng)該會(huì)用max-width，如下所示：

.container { 
    max-width: 780px; 
    width: 80%; 
} 

這里使用 min()函數(shù)也可以為元素設(shè)置最大值：

.container { 
    max-width: min(80%, 780px); 
} 

事例源碼：https://codepen.io/shadeed/pen/3d8b44709b04efdd7336fe91363e3d76?editors=1100

本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 大遷世界公眾號(hào)。