rem布局

js代码如下：

;(function(win,doc){

var rem = 100 * doc.documentElement.clientWidth / 1920;
    doc.documentElement.style.fontSize = rem + 'px';
    win.onresize = function () {
        rem = 100 * doc.documentElement.clientWidth / 1920;
        doc.documentElement.style.fontSize = rem + 'px';
    };

})(window,document);

上面的js代码中的100代表的倍数，假设元素设置为1920px，则换算成rem，则为 19.2rem。这个数字可以根据个人的需要自定义。然后换算的时候除以此数就是rem的值。

rem在新一代的布局中，得到了广泛的使用，不管是pc端还是移动端，都可以使用。而rem配合flex布局也可以达到很好的自适应布局的效果。

这里教大家一些比较常用的布局技巧：

背景图片，可以设置background-size:XXrem XXrem;这样背景图就可以达到自适应的效果了。

padding和margin值也需要用rem。这样在页面自适应的时候才不会变形。

另外注意：假设页面为后台的页面，例如，假设为jsp页面，那么rem的js文件需要在引用样式之前引用，否则在ie下会不兼容。