css实现文字大小自适应的示例代码
<p>在页面编写中经常会碰到页面自适应的问题，也就是页面内部的元素会随着窗口的放大缩小而放大缩小，box可以通过calc + 百分比的形式做到页面自适应，但是<code>box</code>内的字体却无法做到这点，往往<code>box</code>自适应大小了，内部的字体还是原来的大小，看起来会非常别扭，下面就来<code>css</code>实现一下页面文字的自适应大小。</p><h3>clamp()函数</h3>
<p>这里主要用到<code>clamp()</code>函数，<code>clamp()</code> 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。<br />当首选值比最小值要小时，则使用最小值。<br />当首选值介于最小值和最大值之间时，用首选值。<br />当首选值比最大值要大时，则使用最大值。</p>
<p><strong>clamp()的文档：</strong><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp" target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp</a></p>
<p>我们可以通过在<code>clamp()</code>内设置表达式，来动态的设置文字的大小，比如这里有一个视口，最小<code>320px</code>，最大<code>1200px</code>，当视口小于<code>320px</code>的时候字体大小为<code>0.7rem</code>，当视口大小大于<code>1200px</code>的时候，字体大小为<code>1.2rem</code>，否则就使用区间的首选值。</p>
<div class="jb51code"><pre class="brush:css;">.clampSize{
width: 100%; /* 可以动态设置大小 */
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);/* 通过动态计算首选值实现响应式字体变化 */
}</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202308/2023082316233684.gif" /></p>
<p>有人说这个值我不知道该设置多大，那么你可以用这个网站：<a href="https://min-max-calculator.9elements.com/" target="_blank">https://min-max-calculator.9elements.com/</a></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202308/2023082316233685.png" /></p>
<p>左边是你的参数范围，右边是你的视口大小，还是非常方便的啦~</p>
<p>实现了这个之后，我们就可以开始着手实现响应式布局的文字大小自适应了，下面案例中，视口最小<code>320px</code>，最大<code>1200px</code>，文字取值最小<code>0.7rem</code>，最大<code>1.2rem</code>，否则取首选值。</p>
<div class="jb51code"><pre class="brush:xhtml;"><div class="useClamp">
<div>女装</div>
<div>童鞋</div>
<div>箱包</div>
<div>首饰挂件</div>
</div></pre></div>
<div class="jb51code"><pre class="brush:css;">.useClamp{
width: 80%; /*容器大小自适应*/
height: 30px;
padding-left: 10px;
display: flex;
align-items: center;
direction: ltr;
background: #eee;
>div{
min-width: 60px;
width: 30%;/*按钮大小自适应*/
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);/*文字大小自适应，最小0.7rem,最大1.2rem,否则取首选值*/
}
}</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202308/2023082316233686.gif" /></p>
<h3>大小的上下限制</h3>
<p>min()函数</p>
<p>当我们想要给<code>box</code>设置一个宽度，最小为屏幕的<code>80%</code>，最大为<code>1000px</code>，通常会这么写：</p>
<div class="jb51code"><pre class="brush:css;">.box{
width: 80%;
max-width: 1000px;
}</pre></div>
<p>这种写法可以实现容器的最大和最小的宽度限制，有了<code>min()</code>函数后，可以一句<code>css</code>声明即可实现。</p>
<p><code>min()</code> 方法拥有一个或多个逗号分隔符表达式作为参数，表达式的值中最小的值作为参数值。<br />语法：<code>min(expression [, expression])</code><br />其实就是<code>设置最小值为最大值</code>，我们来看一个案例：</p>
<div class="jb51code"><pre class="brush:css;">.minSize{
width:min(80%,1000px ); /* 可以动态设置大小,屏幕宽度大于1000px则宽度为1000px(因为1000比80%小),小于1000px则宽度为80%(此时80%比1000小)*/
height: 40px;
border: 1px solid red;
}</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202308/2023082316233687.gif" /></p>
<p>这里 <code>width:min(100%,1024px ); </code>就是说：屏幕宽度大于<code>1000px</code>则宽度为<code>1000px</code>(因为<code>1000</code>比<code>80%</code>小),小于<code>1000px</code>则宽度为<code>80%</code>(此时<code>80%</code>比<code>1000</code>小)。</p>
<p>注意：<code>min()</code>函数参数需要百分比值，如果是固定<code>px</code>值将会失效。</p>
<h3>max()函数</h3>
<p><code>max()</code>函数其实和<code>min()</code>函是数一样的效果，只不过这里<code>取的是最大值为最小值</code></p>
<div class="jb51code"><pre class="brush:css;">.maxSize{
width:max(90%,1024px); /* max()函数和min()函数语法类似，区别在于max()函数返回的
是最大值，min()函数返回的是最小值。 可以动态设置大小,屏幕宽度90%大于1024px则用90%,若屏幕宽度90%小于1024px则用2014px*/
height: 40px;
border: 1px solid red;
margin-top: 40px;
}</pre></div>
<p><code>width:max(90%,1024px);</code>的意思是：屏幕宽度<code>90%</code>大于<code>1024px</code>则用<code>90%</code>，若屏幕宽度<code>90%</code>小于<code>1024px</code>则用<code>2014px</code></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202308/2023082316233788.gif" /></p>
<p>案例源码：<a href="https://gitee.com/wang_fan_w/css-diary" target="_blank">https://gitee.com/wang_fan_w/css-diary</a></p>
頁:
[1]