目前大家應(yīng)該是對(duì)min是什么意思（使用CSS中的 min）比較感興趣的，所以今天好房網(wǎng)小編CC就來為大家整理了一些關(guān)于min是什么意思（使用CSS中的 min）方面的相關(guān)知識(shí)來分享給大家，希望大家會(huì)喜歡哦。

min是什么意思（使用CSS中的 min）

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

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

兼容性

min 和 max 的支持情況：

clamp()的支持情況：

CSS 比較函數(shù)

根據(jù)CSS規(guī)范，比較函數(shù)是關(guān)于比較多個(gè)值并取其一的操作，我們來研究一下函數(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ù)語法類似，區(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

---

版權(quán)說明：本文由用戶上傳，如有侵權(quán)請(qǐng)聯(lián)系刪除！

---

標(biāo)簽：