设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...
作者：Ahmad shaded
譯者：前端小智
來源：sitepoint點贊再看，微信搜索【大遷世界】關注這個沒有大廠背景，但有著一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了很多我的文檔，和教程資料。
大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。
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。
下面是一個交互的動畫為了讓大家更好的理解：
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。
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
上下文很重要
計算值取決于上下文。 可能是%，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)。
標題字體大小
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));
}
大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。
裝飾性標題
注意看上圖標題下面有一個大的半透明的標題，這是一個裝飾性的文本，根據視窗的大小來縮放。我們可以使用max()函數和CSS viewport單元來設置它的最小值。.section-title:before {
content: attr(data-test);
font-size: max(13vw, 50px);
}
平滑漸變
當在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);
}
透明漸變
當需要在圖片上放置文本時，我們應該在圖片上加層漸變讓文本更加可讀。與上一個示例類似，漸變大小應該在小視圖和大視圖之間有所不同。見下圖：
.element {
background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}
容器寬度
如果有一個容器，它的寬度應該是它父容器的80%，但不能超過780px，你會用什么?通常，你應該會用max-width，如下所示：.container {
max-width: 780px;
width: 80%;
}
這里使用 min()函數也可以為元素設置最大值：.container {
max-width: min(80%, 780px);
}
邊界與陰影
在一些設計案例中，如果元素邊框的寬度和弧度比較大時，在移動時應盡量減小。通過使用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);
}
Grid Gap
在一個使用風格布局的界面上，如果我們想根據視口大小來調整網格之間的間距，使用 clamp() 是很容易做到的：.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: clamp(1rem, 2vw, 24px);
}
如果在不兼容瀏覽器使用這些方法
與任何新的 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;
}
}
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
交流
文章每周持續更新，可以微信搜索【大遷世界 】第一時間閱讀，回復【福利】有多份前端視頻等著你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。
總結
以上是生活随笔為你收集整理的设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 蓝山黑咖啡为什么便宜？
- 下一篇： CSS文本超出2行就隐藏并且显示省略号