1、动态设置html的字体大小
移动端开发时习惯使用rem单位,而rem是基于根html的字体大小的,为了适配不同尺寸屏幕需要动态设置html字体的大小。我们一般习惯于设置html的字体大小是基于iPhone6(375px)的100px。100px的取值主要是为了便于后续rem的计算,当然也可以不设置为100px。
2、使用js设置或使用vw设置
方法一(js):
习惯以iPhone6(375px)为基础,设置字体为100px,其他尺寸根据比例计算,淘宝使用。
var fontSize = document.documentElement.clientWidth / 3.75;document.doucmentElement.style.fontSize = fontSize + 'px';
方法二(vw):
vw把屏幕分成100份,屏幕宽度为100vw,同样以iPhone6(375px)为例:1vw代表3.75px,表示100px计算可得100 / 3.75 = 26.666667vw,爱奇艺使用。
html{font-size: 26.666667vw;}
3、设置body字体大小
众所周知,字体大小是可以被继承传递的,为了避免html的字体大小被继承传递,我们习惯上给body设置自己所需要的字体大小
body{font-size: 16px;}
如果对你有帮助,可以👍收藏+关注,我们一起学前端