移动端开发使用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;
}

如果对你有帮助,可以

上一篇:网易严选官网项目-笔记


下一篇:2020-12-23