使用视口单位vw来实现响应式排版。1vw等同于视口宽度的百分之一,即如果你用vw来设定字体大小的话,字体的大小将总是随视口的大小进行改变。
问题在于,当做上面的事情的时候,因为文本总是随着视口的大小改变大小,用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用 viewport 单位设定文本。
例如我们使用postcss-px-to-viewport对vw进行转换,转换后的字体单位也是vw,当浏览器进行缩放时,字体会随之变大或变小
这里有一个解决方法,它使用了calc(),如果你将vw单位加到了使用固定大小(例如em或者rem)的值组,那么文本仍然是可放缩的。基本来说,是vw加在了放缩后的值上。
h1 {
font-size: calc(1.5rem + 3vw);
}
然后再配合媒介查询中重新定义fontSize
标签:字体大小,适配,单位,放缩,视口,vw,文本 From: https://www.cnblogs.com/whh666/p/17359045.html