移动端字体适配小结

rem

首先，rem是相对根元素html字号的相对单位，一般默认字号是16px，那么1rem=16px

1.先设置header里面的meta标签：

2.用JS来计算适应用户屏幕的根元素字号

上面的640是可以替换的，是设计稿中的宽度。

这样iphone8（375px）下html的font-size 就是14.0625px，iphone8p下font-size就是15.525px，设置一个元素font-size为 1.7066rem， 效果跟设置其font-size为 24px 是一样的(24 / 14.0625 = 1.7066)。
这种px->rem的计算可以用一些现成的工具例如postcss完成。

媒体查询

也可以用媒体查询，对不同的屏幕宽度设置不同的根元素字号

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}