js实现移动端字体自适应（rem）

主要针对移动端做字体相应，相对于媒体查询要方便点，这里简单记录一下方便以后使用。

<script>
    function resizeFont() {
        //获取屏幕宽度
        let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        //设计图参考宽度
        let design = 750;
        if (clientWidth > 750)
            document.getElementsByTagName('html').item(0).style.fontSize = '100px';
        else
            document.getElementsByTagName('html').item(0).style.fontSize = clientWidth / design * 100 + 'px';
    }
    resizeFont();
    window.onresize = function () {
        resizeFont();
    }
</script>

其中750为设计稿的标准，可以根据实际开发的设计图来调整这个参数。

这里我把屏幕大于750px宽度（在浏览器中其实宽度是375）的时候，把字体最大限制为100px。

将以上代码加入页面后，需要字体响应式的地方就可以方便的进行单位换算，例如：p标签的字体要求为16px，则在代码中设置为：font-size: 0.16rem  。