整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
min()函數允許你從逗號分隔的表達式中選擇一個最小值作為 CSS 的屬性值。min()函數可以用于以下任何屬性中 <length>, <frequency>, <angle>, <time>, <percentage>,<number>, 或者 <integer>。
max()函數允許你從逗號分隔的表達式中選擇一個最大值（多半是正數）作為屬性值。max()可以用于以下場合 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, 或 <integer> 。
/* min()函數：接收兩個以上參數，取最小的那個 */
property: min(<first value>, <second value>, <third value>, ...);
/* max()函數：接收兩個以上參數，取最大的那個 */
property: max(<first value>, <second value>, <third value>, ...);<!doctype html>
<html>
<head>
<title>極值函數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()讓我們在設置圖像的最大寬度時更簡單。在上面這個例子中，不使用媒體查詢，而使圖片在屏幕寬度≤600px的小型設備上寬度拉伸為 window 的一半，但在屏幕寬度＞600px的設備上，不超過300px。
<!doctype html>
<html>
<head>
<title>極值函數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>以上代碼演示了為頁面部分標題字體設置最小字號的情形。字號最小值為2rem，或者頁面字號的2倍，或者視口寬的4%。
min()、max()的靈活使用，可以讓你不依賴媒體查詢，也可以做出具有高度響應式的頁面樣式或布局。
好了，靈活的min()、max()函數就介紹到這兒了，趕緊動手試試吧！
更多精通CSS的相關精彩文章制作中，敬請期待。歡迎點贊、收藏和轉發！
系列文章：
CSS屬性值函數（1）概述及語法
CSS屬性值函數（2）calc()數值計算
CSS屬性值函數（3）clamp()限值函數
例
設置段落的最大寬度：
p
{
max-width:100px;
}
屬性定義及使用說明
max-width屬性設置元素的最大寬度。
注意： max-width屬性不包括填充，邊框，或頁邊距！
| 默認值： | none |
|---|---|
| 繼承： | no |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.maxWidth="100px" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| max-width | 1.0 | 7.0 | 1.0 | 2.0.2 | 7.0 |
屬性值
| 值 | 描述 |
|---|---|
| none | 默認。定義對元素的最大寬度沒有限制。 |
| length | 定義元素的最大寬度值。 |
| % | 定義基于包含它的塊級對象的百分比最大寬度。 |
| inherit | 規定應該從父元素繼承 max-width 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
020年4月8日，Firefox瀏覽器支持了 CSS 比較函數（min()，max()，clamp()），這意味著現在所有主流瀏覽器都支持它們。這些CSS函數最大的作用就是可以為我們提供動態布局和更靈活設計組件方法。
簡單的這些元素主要用來設置元素尺寸，如容器大小，字體大小，內距，外距等等 。在這篇文章中，我將用一些示例和大家一起來探討這幾個函數在實際中的使用，希望能更好的幫助大家理解它們。
min 和 max 的支持情況：
clamp()的支持情況：
根據CSS規范，比較函數是關于比較多個值并取其一的操作，我們來研究一下函數。
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()函數和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(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,如下所示：
上面的計算過程是這樣的：
事例源碼：https://codepen.io/shadeed/pen/924419f15bfdcf0cd0103b0587524b0b?editors=0010
計算值取決于上下文。可能是%，em，rem，vw/vh。甚至百分比值也可以基于視口寬度（如果元素直接位于<body>中），也可以基于其父元素。
值得一提的是， 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
在一個使用風格布局的界面上，如果我們想根據視口大小來調整網格之間的間距，使用 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 函數一樣，提供后退方案是很重要的。要實現這一點，我們可以使用以下方法之一：
我們可以在使用比較函數之前加一個默認的方式，如下所示：
.hero {
padding: 4rem 1rem;
padding: clamp(2rem, 10vmax, 10rem) 1rem;
}支持的瀏覽器將忽略第一個，不支持的將使用第一個padding。
我們可以使用@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/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
