這篇文章給大家分享的是有關(guān)CSS中的比較函數(shù)有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供墨竹工卡企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都做網(wǎng)站、html5、小程序制作等業(yè)務(wù)。10年已為墨竹工卡眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

CSS 比較函數(shù)

CSS比較函數(shù)有三個(gè)：

• max()

• min()

• clamp()

min與max

CSS min,max函數(shù)作用類似于js函數(shù)中的min,max，用于取多個(gè)屬性中的最小值或者較大值，屬性之間用逗號(hào)分隔。例子如下

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

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

clamp

clamp函數(shù)需要傳入3個(gè)參數(shù)，一個(gè)最小值，一個(gè)默認(rèn)值，一個(gè)較大值，用于處理邊界值，當(dāng)默認(rèn)值大于較大值時(shí)，取較大值，小于最小值時(shí)，取最小值，介于最小與較大之間時(shí)，取默認(rèn)值。

使用方法

clamp(MIN,DEFAULT,MAX)

clamp就相當(dāng)于max(MIN,min(DEFAULT,MAX))

案例

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

分析下，當(dāng)10vw小于20px，也就是頁(yè)面寬度小于等于200px時(shí)，字體最小為20px,當(dāng)10vw大于40px,也就是頁(yè)面寬度大于等于400px時(shí)，字體較大為40px.處于200px-400px之間的，則按照 width/10的計(jì)算公式進(jìn)行計(jì)算，下面驗(yàn)證一下

小于200px

大于400px

200px到400px之間

兼容性

可以看出這3個(gè)函數(shù)都是最近不久才出來(lái)的，所以兼容性不太好，國(guó)產(chǎn)瀏覽器全掛，主流瀏覽器新的版本基本能夠支持，這是個(gè)好事，因?yàn)檫@三個(gè)數(shù)學(xué)在響應(yīng)式開發(fā)中的作用還是很明顯的，未來(lái)或許這3個(gè)函數(shù)在響應(yīng)式開發(fā)中的比重會(huì)慢慢的得到提升。

常用的使用場(chǎng)景

下面會(huì)列舉幾個(gè)常用的使用場(chǎng)景

側(cè)邊欄響應(yīng)

對(duì)于側(cè)邊欄布局，需要側(cè)邊欄固定寬度，做響應(yīng)式時(shí)可以考慮超過(guò)較大寬度時(shí)通過(guò)vw來(lái)固定側(cè)邊欄的占比

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

字體響應(yīng)

通過(guò)clamp限制較大最小值，然后中間的默認(rèn)值根據(jù)視窗改變

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

漸變平滑過(guò)渡

漸變指定漸變的梯度線，按照一般操作會(huì)出現(xiàn)過(guò)渡不夠平滑的情況，在移動(dòng)端會(huì)有一條明顯的過(guò)渡線

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

利用min修改一下，過(guò)渡會(huì)更加平滑一點(diǎn)

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

動(dòng)態(tài)容器寬度

在實(shí)際運(yùn)用中，比如如果我們想在桌面端限定寬度，在移動(dòng)端顯示100%，需要這樣寫

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

現(xiàn)在只需要

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

感謝各位的閱讀！關(guān)于CSS中的比較函數(shù)有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

新聞名稱：CSS中的比較函數(shù)有哪些-創(chuàng)新互聯(lián)
當(dāng)前URL：http://jinyejixie.com/article44/cceche.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、電子商務(wù)、做網(wǎng)站、品牌網(wǎng)站建設(shè)、云服務(wù)器、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)