移动端rem.js使用

根据rem实现所有移动端自适应需求

原理：动态计算屏幕宽度从而得到动态的font-size的值，用来适配各类手机屏幕

根元素html的font-size=（屏幕宽度/设计图宽度）* 100  乘100为了防止字体过小

如果设计图上div尺寸为750px 则 为750/100 = 7.5rem

动态写法 calc(100vw / 设计图 / 100)

例如：720屏幕。 设计稿为750px则：1rem为  (720/750) * 100 =  96px

96px=0.96rem

window.onload=()=>{
    getRem('720')
}
window.onresize=function(){
    getRem('720')
}
function getRem(width){
    // 获取整个html的dom节点
    let html=document.querySelector('html')
    // 获取body的宽度
    let oWidth=document.body.clientWidth || document.documentElement.clientWidth
    console.log(oWidth);
    html.style.fontSize=oWidth/width*100 +'px'
}

我们设计稿的宽度是720