html5自适应布局rem

1. rem是一个相对于根元素大小的相对单位。可以利用js来控制根元素的font-size:

<script>
    (function(){
        var designW = 640;  //设计稿宽
        var font_rate = 100;
        //适配
document.getElementsByTagName("html")[0].style.fontSize = (document.body || document.documentElement).offsetWidth / designW * font_rate + "px";
document.getElementsByTagName("body")[0].style.fontSize = (document.body || document.documentElement).offsetWidth / designW * font_rate + "px";


        //监测窗口大小变化
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        document.getElementsByTagName("html")[0].style.fontSize = (document.body || document.documentElement).offsetWidth / designW * font_rate + "px";
        document.getElementsByTagName("body")[0].style.fontSize = (document.body || document.documentElement).offsetWidth / designW * font_rate + "px";
                }, false);
            })();
</script>

页面布局上的实现根据设计稿进行布局： 

因为当你看到设计稿的一个元素的宽度要求是100px的时候，你现在需要写成

div{ width：100/100rem；}

注意事项：

100rem是定死的，不用修改，只有修改一下var designW = 750; //设计稿宽； 

如果设计稿是宽是640；var designW = 640； 
中的designW的值就可以自适应了。