移动端字体适配小结

rem

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

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

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

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

<script type="text/javascript">
 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>

上面的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;
}