响应式布局

rem是什么？

　　rem是一个长度单位,常用的长度单位有：

　　* px: 绝对长度单位，最常用

　　* em: 相对长对单位，相对于父元素，不常用

　　* rem: 相对长度单位，相对于根元素，常用于响应式布局

　　* vw: 视口宽度， 100vw = 可视窗口的宽度

　　* vh: 视口高度，100vh = 可视窗口的高度

　　* vmin:选取vm和vh最小的那个

　　* vmax：选取vm和vh最大的那个

响应式布局的常用方案:

　　* media-query ，根据不同的屏幕宽度设置根元素 font-size  （现在已不常用）

　　 * rem ,基于根元素的相对单位 （大多网站采用此方案）

使用rem实现响应式布局：

　　使用js判断页面宽度，动态调整根元素html的font-size值。具体代码实现如下

/**
 * created by yangkk
 */
(function(doc,win){
    var flex = function() {
        var docEl = doc.documentElement;
        var deviceWidth = docEl.clientWidth > 500 ? 500 : docEl.clientWidth;
        docEl.style.fontSize = deviceWidth / 7.5 + "px";//如果设计图是320的话就除以3.2
    };
    flex();
    win.addEventListener('resize', flex, false);
})(document,window);