首頁  >  文章  >  web前端  >  CSS中的比較函數:max()、min()、clamp()

CSS中的比較函數:max()、min()、clamp()

青灯夜游
青灯夜游轉載
2020-12-21 09:47:083756瀏覽

本篇文章跟大家介紹CSS中的三個比較函數max()、min()、clamp()。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

CSS中的比較函數:max()、min()、clamp()

推薦:《css影片教學

CSS 比較函數

CSS中的比較函數:max()、min()、clamp()

CSS比較函數有三個:

  • max()
  • #min()
  • clamp()

min與max

CSS min,max函數作用類似js函數中的min,max,用於取多個屬性中的最小值或最大值,屬性之間以逗號分隔。範例如下

      width: min(100px,200px,300px); //取值100px
      height: max(100px,200px,300px); //取值300px

CSS中的比較函數:max()、min()、clamp()

如圖,寬度取了最小值100px,高度取了最大值300px.

clamp

#clamp函數需要傳入3個參數,一個最小值,一個預設值,一個最大值,用於處理邊界值,當預設值#大於最大值時,取最大值,小於最小值時,取最小值,介於最小與最大值之間時,取預設值。

使用方法

clamp(MIN,DEFAULT,MAX)

clamp就相當於max(MIN,min(DEFAULT,MAX))

案例

font-size: clamp(20px,10vw,40px);

分析下,當10vw小於20px,也就是頁面寬度小於等於200px時,字體最小為20px,當10vw大於40px,也就是頁面寬度大於等於400px時,字體最大為40px.處於200px- 400px之間的,則依照width/10的計算公式計算,下面驗證

#小於200px

CSS中的比較函數:max()、min()、clamp()

##大於400px

CSS中的比較函數:max()、min()、clamp()

#200px到400px之間

CSS中的比較函數:max()、min()、clamp()

#相容性

CSS中的比較函數:max()、min()、clamp()

可以看出這3個函數都是最近不久才出來的,所以相容性不太好,國產瀏覽器全掛,主流瀏覽器最新的版本基本上能夠支持,這是個好事,因為這三個數學在響應式開發中的作用還是很明顯的,未來或許這3個函數在響應式開發中的比重會慢慢的提升。

常用的使用場景

下面會列舉幾個常用的

使用場景

#側邊欄回應

對於側邊欄佈局,需要側邊欄固定寬度,做響應式時可以考慮超過最大寬度時透過vw來固定側邊欄的佔比

      aside {
        background: #ccc;
        flex-basis: max(30vw, 150px);
      }
      main {
        background: #09acdd;
        flex-grow: 1;
      }

CSS中的比較函數:max()、min()、clamp()

字體反應

透過clamp限制最大最小值,然後中間的預設值會根據視窗改變

font-size: clamp(20px, 10vw, 40px);

#漸變平滑過渡

漸變指定漸變的梯度線,依照一般運算會出現過渡不夠平滑的情況,在行動端會有一條明顯的過渡線

background: linear-gradient(135deg, #2c3e50, #2c3e50, #3498db);

CSS中的比較函數:max()、min()、clamp()

利用min修改一下,過渡會更平滑一點

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

CSS中的比較函數:max()、min()、clamp()

動態容器寬度

在實際運用中,例如如果我們想要在桌面端限定寬度,在行動端顯示100%,需要這樣寫

    .container{
      width: 1440px;
      max-width: 100%;
    }
現在只需要

    .container{
      width: min(1440px,100%);
    }
非常簡潔明了。

總結

這3個函數適用於響應式佈局的開發,在不需要考慮相容性問題的情況下可以酌情使用,但如果要考慮相容性,還是最好不要使用。最近在總結css函數相關的東西,歡迎各位持續關注,源碼在這裡,

戳這裡

更多程式相關知識,請造訪:程式設計學習! !

以上是CSS中的比較函數:max()、min()、clamp()的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除