标签搜索
隐藏侧边栏

root + vm vh 实现响应式字体!

搞前端的半夏
2022-04-22 / 0 评论 / 0 点赞 / 134 阅读 / 1,323 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

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


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

最初:@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在页面,根据视口的宽高,在根元素上设置文字的大小,这样也是很好的一种解决方法,可自行尝试。

0

评论区