rem 学习

1. 理论   参考文章          https://blog.youkuaiyun.com/qq20004604/article/details/67071008

2.  公式   参考文章         css88.com/doc/backbone/#examples

 

window.onload = function(){
    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    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";
}

html的px大小=屏幕的宽度/设计稿的宽度大小*预设的比例（不要这个也可以，但是不好算，比如是3）；

设计稿的是不会变的，唯一变化的是屏幕的分辨率，我们想要的是尺寸的大小要跟随着分辨率的大小也变化。

所以要知道屏幕的宽度是设计稿的几倍，在量设计稿的时候直接乘以这个倍数就好了，但是有的时候不好乘，所以说直接夸大100倍，量的时候直接除以100就可了。