這篇文章給大家分享的是有關CSS中的比較函數有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創新互聯是一家專業提供墨竹工卡企業網站建設,專注與成都網站制作、成都做網站、html5、小程序制作等業務。10年已為墨竹工卡眾多企業、政府機構等服務。創新互聯專業網站制作公司優惠進行中。

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%);
    }

感謝各位的閱讀！關于CSS中的比較函數有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞名稱：CSS中的比較函數有哪些-創新互聯
當前URL：http://vcdvsql.cn/article44/cceche.html

成都網站建設公司_創新互聯，為您提供用戶體驗、電子商務、做網站、品牌網站建設、云服務器、Google

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯