使用rem实现H5元素自适应

H5开发由于不存在android dip这种相对单位，所以在适配时多多少少会出现兼容性问题。
rem是CSS3新引进来的一个度量单位，是直接相对于根元素，这就避开了很多层级关系。移动端新型浏览器对rem的兼容很好，可以放心使用。

以下写法是默认 1rem = 18px

    //使用相对单位rem
    var designW = 375;  //设计稿宽
    var font_rate = 18;    //字体大小
    //根据窗口宽度适配fontsize
    document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
    document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
    //监测窗口大小变化
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", 
        function() {
            document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
            document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
            }, false);
    //使用相对单位rem

所以在CSS标注单位时

width:180px;
转化为下面这种写法
width:10rem;//转换计算后为180/18=10rem