前端项目使用vw视口单位进行适配时字体大小的解决方案

发布时间 2023-04-27 15:30:08作者: 资深if-else侠

使用视口单位vw来实现响应式排版。1vw等同于视口宽度的百分之一,即如果你用vw来设定字体大小的话,字体的大小将总是随视口的大小进行改变。

问题在于,当做上面的事情的时候,因为文本总是随着视口的大小改变大小,用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用 viewport 单位设定文本。

例如我们使用postcss-px-to-viewport对vw进行转换,转换后的字体单位也是vw,当浏览器进行缩放时,字体会随之变大或变小

这里有一个解决方法,它使用了calc(),如果你将vw单位加到了使用固定大小(例如em或者rem)的值组,那么文本仍然是可放缩的。基本来说,是vw加在了放缩后的值上。

h1 {
  font-size: calc(1.5rem + 3vw);
}

然后再配合媒介查询中重新定义fontSize