rem布局js简便代码

前言

rem（font size of the root element）是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化，那么整个网页中运用到 rem的也会随之变化。由于现在不同屏幕分辨率的设备越来越多，尤其是手机端移动设备，人的审美水平的挺高，仅仅依靠百分比以不足以满足人们的需求。

区别

rem、em和px的区别

px 像素，通常用作网页设计，有较高的精度，是一个绝对单位

em 相对长度单位，受父级或祖级元素的文字大小所影响，1em就是1倍的文字大小

rem 相对长度单位，但相对的只是HTML根元素

代码

//第一个参数设计图尺寸，第二个参数要设置的根元素font-size大小
getRem(750, 100);
window.onresize = function() {
    getRem(750, 100)
};

function getRem(pwidth, prem) {
    var html = document.getElementsByTagName("html")[0];
     //获取视窗宽度
     //下面的代码是为了考虑兼容性
     //在IE7、IE8、Firefox中，document.body.clientWidth以及 document.body.clientHeightzhi值为0，此时，可以使用 document.documentElement.clientHeight等代替。
    var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
    html.style.fontSize = oWidth / pwidth * prem + "px";
}

 使用

直接在css预处理器使用更为方便，比如less

//若设计图是750，开发是350可直接/50
div {
    height: 50/50rem;
    width:50/50rem;
    border:1/50rem solid #ccc;
    font-size: 14/50rem;
}