移动端rem使用及理解

先上代码

window.onload = function(){
    getRem(720,100)
};
window.onresize = function(){
    getRem(720,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}

 

首先我们要明白为什么使用rem,rem有什么作用?
rem: 继承于html的font-size大小,比如html的font-size等于16px,那么1rem 就等于16px。
这里既然rem可以继承 html 的font-size的大小，我们可以使用 监听窗口的大小，来动态改变html 的font-size 来使得页面兼容于各个移动端手机。

举例
移动端 屏幕宽除以设计图宽得到比例，比如屏幕宽等于750px，设计图宽等于1000px，750除以1000得到0.75px，等于说是设计图的1px，在浏览器上展示的大小为0.75px，
这里我们要继承这个比例大小，采用rem的方法，继承html的font-size大小的方法去实现，设置html的font-size等于 0.75px（屏幕的0.75px相当于设计图的1px）,
rem会继承html的font-size大小，所以我们在页面里面使用的1rem就等于设计图的1px，
后面可以忽略（为了方便我们可以把得到的设计图和屏幕宽的比例乘以100，等于75，现在1rem等于设计图的100px,0.01rem等于设计图的1px。

公式 屏幕宽度 / 设计图宽度 * 100 = html font-size（0.01rem 等于设计图的 1px）

  屏幕宽度 / 设计图宽度 = 0.5（比例）;
  屏幕 0.5px = 设计图 1px;
  屏幕 0.5px * 100 = 设计图 1px * 100
  屏幕 50px = 设计图 100px
  设置 html font-size: 50px;
  1rem = 50px = 设计图 100px;
  设计图元素 32px = 0.32rem

有什么不足或错误的，请大家指出，第一次发博客，发一下自己的感悟和理解