移动端开发使用rem时动态设置html的字体大小

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;
}

如果对你有帮助，可以👍收藏+关注，我们一起学前端