响应式文字的”完美解决方案“

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～.点我探索新世界！

前言

在做响应式网站的时候，我们经常需要考虑的是文字的大小，图片的宽高，盒子的大小等等！对于我个人来说，我是经常使用rem，rem，vh,vw等等响应式单位的。而对于文字的大小，我使用最多的是rem和vw。rem是相对于根元素的大小，vw是相对于视口宽度的大小。

文字响应式

考虑下面的场景：

网站中存在标题，在不同的设备下需要显示不同的大小。

之前我的方法是这样的：

方案1-rem

第一反应我是使用rem.

h1{
	font-size:2rem;
}

这样写法的带来的问题是，由于rem是相对于根元素的，所以无论你的视口怎么变化，字体大小其实一直是保持不变的。

那么我们就需要使用媒体查询，根据不同设备的大小，动态的调整跟根元素字体的大小。

例如：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  html{
    font-size:**px;
  }
}

这应该算是一种完美的解决方案了，不过如果要考虑的设备比较多，或者划分的尺寸比较细，就要写很多css代码

方案二-vw

我们不考虑媒体查询的情况下，如果根据视口的宽度去调整字体的大小的话，那我就考虑使用vw了，wv是完全根据视口的宽度来设置值的。

h1{
  font-size:7vw;
}

不过这中实现方案，虽然可以动态的调整文字的大小，但是也可能会出现极端的情况，那就是文字非常高大或者非常小。此时我们的clamp()登场了！

clamp()

引用

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

语法

clamp(最小值，首选值，最大值)；

• 当首选值小于最小值时，使用最小值。

• 当首选值介于最小值和最大值之间时，使用首选值。

• 当首选值大于最大值时，使用最大值。

对于上面h1的例子，我们可以这样写：

h1{
font-size:clamp(2rem,7vw,4rem);
}

当7vw换算成px的值小于2rem换算的px时，此时h1的字体的大小就是2rem。总之h1的大小总会是在2rem,7vw,和4rem之间的。

有人说h1，那不就是这三个值其中的一个吗？三个值也能叫响应式。如果你有这种想法，你就错了!!!首先，如果根元素的字体大小是固定的话，2rem,4rem也是固定的，但是7vw却是千遍万化的。如果你再将根元素合理的动态设置文字大小的话，那我我相信clamp将会超越使用媒体查询设置字体大小！