在頁(yè)面編寫(xiě)中經(jīng)常會(huì)碰到頁(yè)面自適應(yīng)的問(wèn)題，也就是頁(yè)面內(nèi)部的元素會(huì)隨著窗口的放大縮小而放大縮小，box可以通過(guò)calc + 百分比的形式做到頁(yè)面自適應(yīng)，但是box內(nèi)的字體卻無(wú)法做到這點(diǎn)，往往box自適應(yīng)大小了，內(nèi)部的字體還是原來(lái)的大小，看起來(lái)會(huì)非常別扭，下面就來(lái)css實(shí)現(xiàn)一下頁(yè)面文字的自適應(yīng)大小。

clamp()函數(shù)

這里主要用到clamp()函數(shù)，clamp() 函數(shù)的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過(guò)最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。它接收三個(gè)參數(shù)：最小值、首選值、最大值。
當(dāng)首選值比最小值要小時(shí)，則使用最小值。
當(dāng)首選值介于最小值和最大值之間時(shí)，用首選值。
當(dāng)首選值比最大值要大時(shí)，則使用最大值。

clamp()的文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp

我們可以通過(guò)在clamp()內(nèi)設(shè)置表達(dá)式，來(lái)動(dòng)態(tài)的設(shè)置文字的大小，比如這里有一個(gè)視口，最小320px，最大1200px，當(dāng)視口小于320px的時(shí)候字體大小為0.7rem，當(dāng)視口大小大于1200px的時(shí)候，字體大小為1.2rem，否則就使用區(qū)間的首選值。

.clampSize{
    width: 100%; /* 可以動(dòng)態(tài)設(shè)置大小 */
    height: 40px;
    margin: 30px;
    line-height: 40px;
    text-align: center;
    border: 1px solid red;
    font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);  /* 通過(guò)動(dòng)態(tài)計(jì)算首選值實(shí)現(xiàn)響應(yīng)式字體變化 */
}

有人說(shuō)這個(gè)值我不知道該設(shè)置多大，那么你可以用這個(gè)網(wǎng)站：https://min-max-calculator.9elements.com/

左邊是你的參數(shù)范圍，右邊是你的視口大小，還是非常方便的啦~

實(shí)現(xiàn)了這個(gè)之后，我們就可以開(kāi)始著手實(shí)現(xiàn)響應(yīng)式布局的文字大小自適應(yīng)了，下面案例中，視口最小320px，最大1200px，文字取值最小0.7rem，最大1.2rem，否則取首選值。

<div class="useClamp">
     <div>女裝</div>
     <div>童鞋</div>
     <div>箱包</div>
     <div>首飾掛件</div>
</div>

.useClamp{
    width: 80%; /*容器大小自適應(yīng)*/
    height: 30px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    direction: ltr;
    background: #eee;
    >div{
        min-width: 60px;
        width: 30%;  /*按鈕大小自適應(yīng)*/
        height: 30px;
        background: #4d90fe;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 4px;
        margin-inline-end: 10px;
        font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);  /*文字大小自適應(yīng)，最小0.7rem,最大1.2rem,否則取首選值*/
    }
}

大小的上下限制

min()函數(shù)

當(dāng)我們想要給box設(shè)置一個(gè)寬度，最小為屏幕的80%，最大為1000px，通常會(huì)這么寫(xiě)：

.box{
width: 80%;
max-width: 1000px;
}

這種寫(xiě)法可以實(shí)現(xiàn)容器的最大和最小的寬度限制，有了min()函數(shù)后，可以一句css聲明即可實(shí)現(xiàn)。

min() 方法擁有一個(gè)或多個(gè)逗號(hào)分隔符表達(dá)式作為參數(shù)，表達(dá)式的值中最小的值作為參數(shù)值。
語(yǔ)法：min(expression [, expression])
其實(shí)就是設(shè)置最小值為最大值，我們來(lái)看一個(gè)案例：

.minSize{
    width:min(80%,1000px ); /* 可以動(dòng)態(tài)設(shè)置大小,屏幕寬度大于1000px則寬度為1000px(因?yàn)?000比80%小),小于1000px則寬度為80%(此時(shí)80%比1000小)*/
    height: 40px;
    border: 1px solid red;
}

這里 width:min(100%,1024px ); 就是說(shuō)：屏幕寬度大于1000px則寬度為1000px(因?yàn)?code>1000比80%小),小于1000px則寬度為80%(此時(shí)80%比1000小)。

注意：min()函數(shù)參數(shù)需要百分比值，如果是固定px值將會(huì)失效。

max()函數(shù)

max()函數(shù)其實(shí)和min()函是數(shù)一樣的效果，只不過(guò)這里取的是最大值為最小值

.maxSize{
    width:max(90%,1024px); /* max()函數(shù)和min()函數(shù)語(yǔ)法類似，區(qū)別在于max()函數(shù)返回的
    是最大值，min()函數(shù)返回的是最小值。 可以動(dòng)態(tài)設(shè)置大小,屏幕寬度90%大于1024px則用90%,若屏幕寬度90%小于1024px則用2014px*/
    height: 40px;
    border: 1px solid red;
    margin-top: 40px;
}

width:max(90%,1024px);的意思是：屏幕寬度90%大于1024px則用90%，若屏幕寬度90%小于1024px則用2014px

案例源碼：https://gitee.com/wang_fan_w/css-diary

到此這篇關(guān)于css實(shí)現(xiàn)文字大小自適應(yīng)的示例代碼的文章就介紹到這了,更多相關(guān)css文字大小自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論