学透CSS- :root + vm/vh 实现响应式字体！！！

Posted 2021-10-25 前端picker

前言

一个网页中最多的东西是啥? 正常人的第一反映肯定是文字，你要是跟我说是图片，那我只能表示：

响应式网页设计中一个很难解决的问题就是文字的大小的问题了，面对千奇百怪的设备，如何解决文字的设配问题，是一个很重要的问题。

在上一篇文章学透CSS-合理使用这8个单位,让你的网站Responsive中我们介绍了8个响应式单位，大多数响应式字体的解决方案基本都是依赖于这几个单位来进行解决的。

最初：@media

下面是两个简单的例子，通过使用媒体查询，改变字体在不同设备下的文字大小。这种做法的缺点在哪里呢？是因为px是固定的，如果你设置的设备的宽度范围比较大，那么就会导致当前的px在另一个设备上看上去很大或者很小。另一个问题是；你不可能所有的文字都用这个大小，还需要针对其他的文字进行单独的处理，很麻烦。代码也很多。

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

}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    **px
}

加强：@media + rem

rem就是html根元素font-size字体大小的倍数。

依赖于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;
  }

p{
  font-size:1rem;
}

:root + vm + vh

对于我来说，我最喜欢的就是使用:root来做，但是你也可以选择html，在:root中根据vm和vh来计算出字体的大小，从而实现设配不同的设备。

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

body {
  font-size: 1rem/1.6 
}

这个公式最终计算出来的大小是啥？先来简单回忆一下：

1vw = 视口宽度的 1%

1vh = 视口高度的 1%

1vmin = 1vw 或 1vh，以较小者为准

1vmax = 1vw 或 1vh，以较大者为准

如果我们将其应用于 iPhone 7 的视口尺寸，即 375x667，计算出的值为:root：

:root {
  font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */
}

结语

这几个方法都可以使用，但我还是坚持:root。除了这几种方法，还有其他的方法，例如使用JS在页面，根据视口的宽高，在根元素上设置文字的大小，这样也是很好的一种解决方法，可自行尝试。