CSS函數那些事（一）比較函數

CSS比較函數有三個：

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

min與max

CSS min,max函數做用相似於js函數中的min,max，用於取多個屬性中的最小值或者最大值，屬性之間用逗號分隔。例子以下

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

如圖，寬度取了最小值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

大於400px

200px到400px之間

兼容性

能夠看出這3個函數都是最近不久纔出來的，因此兼容性不太好，國產瀏覽器全掛，主流瀏覽器最新的版本基本可以支持，這是個好事，由於這三個數學在響應式開發中的做用仍是很明顯的，將來或許這3個函數在響應式開發中的比重會慢慢的獲得提高。

經常使用的使用場景

下面會列舉幾個經常使用的使用場景

側邊欄響應

對於側邊欄佈局，須要側邊欄固定寬度，作響應式時能夠考慮超過最大寬度時經過vw來固定側邊欄的佔比

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

字體響應

經過clamp限制最大最小值，而後中間的默認值根據視窗改變

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

漸變平滑過渡

漸變指定漸變的梯度線，按照通常操做會出現過渡不夠平滑的狀況，在移動端會有一條明顯的過渡線

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

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

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

動態容器寬度

在實際運用中，好比若是咱們想在桌面端限定寬度，在移動端顯示100%，須要這樣寫

.container{
      width: 1440px;
      max-width: 100%;
    }

如今只須要

.container{
      width: min(1440px,100%);
    }

很是簡潔明瞭。

總結

這3個函數適用於響應式佈局的開發，在不須要考慮兼容性問題的狀況下能夠酌情使用，但若是要考慮兼容性，仍是最好不要使用。我最近在總結css函數相關的東西，歡迎各位持續關注，源碼在這，戳這裏戳這裏