适配字体

rem

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

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

为了兼容谷歌浏览器（默认12px），一般把html的字体大小设置为100px，body的字体大小设置为0.14rem

html { font-size: 100px; }

body { font-size: 0.14rem; }

 

 js修改字体大小

let htmlDOM = document.getElementsByTagName("html")[0];

htmlDOM.style.fontSize = this.screenWidth / 20 + "px";

算出来的大小就是1rem

 

 

js监听窗口变化，改变字体大小

reFontsize();
window.addEventListener('resize',reFontsize,false);
function reFontsize() {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 手机宽度（设计稿宽度）*100 + 'px';
}

另，px->rem的计算可以用一些现成的工具如postcss

 

 

相关链接

css初始化

https://blog.csdn.net/weixin_43039174/article/details/83058831?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase