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初始化