整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
min()函數(shù)允許你從逗號分隔的表達式中選擇一個最小值作為 CSS 的屬性值。min()函數(shù)可以用于以下任何屬性中 <length>, <frequency>, <angle>, <time>, <percentage>,<number>, 或者 <integer>。
max()函數(shù)允許你從逗號分隔的表達式中選擇一個最大值（多半是正數(shù)）作為屬性值。max()可以用于以下場合 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, 或 <integer> 。
/* min()函數(shù)：接收兩個以上參數(shù)，取最小的那個 */
property: min(<first value>, <second value>, <third value>, ...);
/* max()函數(shù)：接收兩個以上參數(shù)，取最大的那個 */
property: max(<first value>, <second value>, <third value>, ...);<!doctype html>
<html>
<head>
<title>極值函數(shù)min()示例</title>
<style>
.logo {
width: min(50vw, 300px);
}
</style>
</head>
<body>
<img
src="https://developer.mozilla.org/static/img/web-docs-sprite.svg"
alt="Web Docs Logo"
class="logo" />
</body>
</html>min()讓我們在設(shè)置圖像的最大寬度時更簡單。在上面這個例子中，不使用媒體查詢，而使圖片在屏幕寬度≤600px的小型設(shè)備上寬度拉伸為 window 的一半，但在屏幕寬度＞600px的設(shè)備上，不超過300px。
<!doctype html>
<html>
<head>
<title>極值函數(shù)max()示例</title>
<style>
h1 {
font-size: 2rem;
}
h1.responsive {
font-size: max(4vw, 2em, 2rem);
}
</style>
</head>
<body>
<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
This text is always legible, and is responsive, to a point
</h1>
</body>
</html>以上代碼演示了為頁面部分標(biāo)題字體設(shè)置最小字號的情形。字號最小值為2rem，或者頁面字號的2倍，或者視口寬的4%。
min()、max()的靈活使用，可以讓你不依賴媒體查詢，也可以做出具有高度響應(yīng)式的頁面樣式或布局。
好了，靈活的min()、max()函數(shù)就介紹到這兒了，趕緊動手試試吧！
更多精通CSS的相關(guān)精彩文章制作中，敬請期待。歡迎點贊、收藏和轉(zhuǎn)發(fā)！
系列文章：
CSS屬性值函數(shù)（1）概述及語法
CSS屬性值函數(shù)（2）calc()數(shù)值計算
CSS屬性值函數(shù)（3）clamp()限值函數(shù)
例
設(shè)置段落的最大寬度：
p
{
max-width:100px;
}
屬性定義及使用說明
max-width屬性設(shè)置元素的最大寬度。
注意： max-width屬性不包括填充，邊框，或頁邊距！
| 默認(rèn)值： | none |
|---|---|
| 繼承： | no |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.maxWidth="100px" |
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| max-width | 1.0 | 7.0 | 1.0 | 2.0.2 | 7.0 |
屬性值
| 值 | 描述 |
|---|---|
| none | 默認(rèn)。定義對元素的最大寬度沒有限制。 |
| length | 定義元素的最大寬度值。 |
| % | 定義基于包含它的塊級對象的百分比最大寬度。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 max-width 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
020年4月8日，Firefox瀏覽器支持了 CSS 比較函數(shù)（min()，max()，clamp()），這意味著現(xiàn)在所有主流瀏覽器都支持它們。這些CSS函數(shù)最大的作用就是可以為我們提供動態(tài)布局和更靈活設(shè)計組件方法。
簡單的這些元素主要用來設(shè)置元素尺寸，如容器大小，字體大小，內(nèi)距，外距等等 。在這篇文章中，我將用一些示例和大家一起來探討這幾個函數(shù)在實際中的使用，希望能更好的幫助大家理解它們。
min 和 max 的支持情況：
clamp()的支持情況：
根據(jù)CSS規(guī)范，比較函數(shù)是關(guān)于比較多個值并取其一的操作，我們來研究一下函數(shù)。
min() 函數(shù)支持一個或多個表達式，每個表達式之間使用逗號分隔，然后以最小的表達式的值作為返回值，我們可以使用min()為元素設(shè)置最大值。
考慮下面的例子，我們希望元素的最大寬度為500px。
.element {
width: min(50%, 500px);
}瀏覽器需要在(50%，500px) 取一個最小值，因為有個百分比，所以最終結(jié)果取決于視口寬度。如果50%的計算值大于500px，那么就取 500px。
否則，如果50%計算值小于500px，則50%將用作寬度的值，假設(shè)視口的寬度是900px， 最終元素的寬度為 900px x 50%=450px。
下面是一個交互的動畫為了讓大家更好的理解：
事例源碼：https://codepen.io/shadeed/debug/f5e338c8a1c7cd29e382c72a5eb37e48/auth
max()函數(shù)和min()函數(shù)語法類似，區(qū)別在于max()函數(shù)返回的是最大值，min()函數(shù)返回的是最小值。同樣，我們可以使用man()為元素設(shè)置最小值。
考慮下面的例子，我們希望元素的最小寬度為500px。
.element {
width: max(50%, 500px);
}瀏覽器需要在(50%，500px) 取一個最大值，因為有個百分比，所以最終結(jié)果取決于視口寬度。如果50%的計算值小于500px，那么就取 500px。
否則，如果50%計算值大于500px，則50%將用作寬度的值，假設(shè)視口的寬度是1150px， 最終元素的寬度為 1150px x 50%=575px。
事例源碼：https://cdpn.io/shadeed/debug/cca927df45964fbe1a8342ad3ace6d71
clamp()函數(shù)作用是返回一個區(qū)間范圍的值。語法如下：
clamp(MIN, VAL, MAX)其中MIN表示最小值，VAL表示首選值，MAX表示最大值。意思是，如果VAL在MIN和MAX范圍之間，則使用VAL作為函數(shù)返回值；如果VAL大于MAX，則使用MAX作為返回值；如果VAL小于MIN，則使用MIN作為返回值。
clamp(MIN, VAL, MAX)實際上等同于max(MIN, min(VAL, MAX))。
考慮下面的例子
.element {
width: clamp(200px, 50%, 1000px);
}假設(shè)我們有一個元素，其最小寬度為200px，首選值為50%，最大值為1000px,如下所示：
上面的計算過程是這樣的：
事例源碼：https://codepen.io/shadeed/pen/924419f15bfdcf0cd0103b0587524b0b?editors=0010
計算值取決于上下文?？赡苁?，em，rem，vw/vh。甚至百分比值也可以基于視口寬度（如果元素直接位于<body>中），也可以基于其父元素。
值得一提的是， clamp() 函數(shù)也可以用于數(shù)學(xué)表達式，而不必借助于 calc()，如下代碼所示：
.type {
/* 強制字體大小保持在 12px 到 100px 之間 */
font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}通常，頁面的側(cè)邊欄是固定的，主界面度是靈活的。如果視口足夠大，我們可以根據(jù)視口的大小動態(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
clamp()的一個很好的用例是用于標(biāo)題。假設(shè)我們希望標(biāo)題的最小大小為16px，最大大小為50px。clamp()函數(shù)將為我們提供一個介于兩者之間的值。
.title {
font-size: clamp(16px, 5vw, 50px);
}在這里使用clamp()是非常適合的，因為它確保了所使用的字體大小是可訪問的和易于閱讀的。如果換做min()，那么就不能在小的視圖中控制字體了。
.title {
font-size: min(3vw, 24px); /* Not recommended, bad for accessibility */
}在移動端，字體大小很小。因此，不要對字體大小使用min()函數(shù)。當(dāng)然，我們也可以通過媒體查詢來適配，但是這樣就錯過了一次使用** CSS 比較函數(shù)**實戰(zhàn)。
如前所述，可以在max()函數(shù)中嵌套min()來實現(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)題，這是一個裝飾性的文本，根據(jù)視窗的大小來縮放。我們可以使用max()函數(shù)和CSS viewport單元來設(shè)置它的最小值。
.section-title:before {
content: attr(data-test);
font-size: max(13vw, 50px);
}源碼: https://codepen.io/shadeed/pen/e0128b73de7c84cb9b98cf733a3835c4?editors=1100
當(dāng)在CSS中使用漸變時，你可能需要對它進行一些調(diào)整，使顏色之間的過渡更加平滑。我們先看看下面的漸變：
.element {
background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}注意移動的過渡是有一條比較明顯的線分開，這是不好的。我們可以通過使用媒體查詢來解決這個問題：
@media (max-width: 700px) {
.element {
background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
}
}有一種更加簡潔的方法就是使用 min() 函數(shù)，如下 所示：
.element {
background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}事例源碼：https://codepen.io/shadeed/pen/2c4bf2ded32f66390fdef13409be4a10?editors=1100
當(dāng)需要在圖片上放置文本時，我們應(yīng)該在圖片上加層漸變讓文本更加可讀。與上一個示例類似，漸變大小應(yīng)該在小視圖和大視圖之間有所不同。見下圖：
.element {
background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}事例源碼：https://codepen.io/shadeed/pen/babf1bfd4c85eeb1b6f9f549dd0fe602?editors=1100
如果有一個容器，它的寬度應(yīng)該是它父容器的80%，但不能超過780px，你會用什么?通常，你應(yīng)該會用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
在一些設(shè)計案例中，如果元素邊框的寬度和弧度比較大時，在移動時應(yīng)盡量減小。通過使用clamp()，我們可以根據(jù)視窗寬度使其動態(tài)。
.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
在一個使用風(fēng)格布局的界面上，如果我們想根據(jù)視口大小來調(diào)整網(wǎng)格之間的間距，使用 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 函數(shù)一樣，提供后退方案是很重要的。要實現(xiàn)這一點，我們可以使用以下方法之一：
我們可以在使用比較函數(shù)之前加一個默認(rèn)的方式，如下所示：
.hero {
padding: 4rem 1rem;
padding: clamp(2rem, 10vmax, 10rem) 1rem;
}支持的瀏覽器將忽略第一個，不支持的將使用第一個padding。
我們可以使用@supports檢測瀏覽器是否支持 CSS 比較函數(shù)，如下所示：
.hero {
/* 默認(rèn)值，用于不支持的瀏覽器 */
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/
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
