在頁面編寫中經(jīng)常會(huì)碰到頁面自適應(yīng)的問題，也就是頁面內(nèi)部的元素會(huì)隨著窗口的放大縮小而放大縮小，box可以通過calc + 百分比的形式做到頁面自適應(yīng)，但是box內(nèi)的字體卻無法做到這點(diǎn)，往往box自適應(yīng)大小了，內(nèi)部的字體還是原來的大小，看起來會(huì)非常別扭，下面就來css實(shí)現(xiàn)一下頁面文字的自適應(yīng)大小。
這里主要用到clamp()函數(shù)，clamp() 函數(shù)的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。它接收三個(gè)參數(shù)：最小值、首選值、最大值。
當(dāng)首選值比最小值要小時(shí)，則使用最小值。
當(dāng)首選值介于最小值和最大值之間時(shí)，用首選值。
當(dāng)首選值比最大值要大時(shí)，則使用最大值。
clamp()的文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp
我們可以通過在clamp()內(nèi)設(shè)置表達(dá)式，來動(dòng)態(tài)的設(shè)置文字的大小，比如這里有一個(gè)視口，最小320px，最大1200px，當(dāng)視口小于320px的時(shí)候字體大小為0.7，當(dāng)視口大小大于1200px的時(shí)候，字體大小為1.2，否則就使用區(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); /* 通過動(dòng)態(tài)計(jì)算首選值實(shí)現(xiàn)響應(yīng)式字體變化 */
}
有人說這個(gè)值我不知道該設(shè)置多大，那么你可以用這個(gè)網(wǎng)站：https://min-max-calculator.9elements.com/
左邊是你的參數(shù)范圍，右邊是你的視口大小，還是非常方便的啦~
實(shí)現(xiàn)了這個(gè)之后，我們就可以開始著手實(shí)現(xiàn)響應(yīng)式布局的文字大小自適應(yīng)了，下面案例中，視口最小320px，最大1200px，文字取值最小0.7，最大1.2，否則取首選值。
<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ì)這么寫：
.box{
width: 80%;
max-width: 1000px;
}
這種寫法可以實(shí)現(xiàn)容器的最大和最小的寬度限制，有了min()函數(shù)后，可以一句css聲明即可實(shí)現(xiàn)。
min() 方法擁有一個(gè)或多個(gè)逗號分隔符表達(dá)式作為參數(shù)，表達(dá)式的值中最小的值作為參數(shù)值。
語法：min(expression [, expression])
其實(shí)就是設(shè)置最小值為最大值，我們來看一個(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 );就是說：屏幕寬度大于1000px則寬度為1000px(因?yàn)?code class="hljs language-yaml" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; box-sizing: border-box; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-size: 1em; margin: 0px; padding: 2px 6px; border: 0px; vertical-align: baseline; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; display: inline-block;">1000比80小),小于1000px則寬度為80(此時(shí)80比1000小)。
注意：min()函數(shù)參數(shù)需要百分比值，如果是固定px值將會(huì)失效。
max()函數(shù)
max()函數(shù)其實(shí)和min()函是數(shù)一樣的效果，只不過這里取的是最大值為最小值
.maxSize{
width:max(90%,1024px); /* max()函數(shù)和min()函數(shù)語法類似，區(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
該文章在 2023/8/24 22:06:56 編輯過
400 186 1886
