使用rem作为css响应式布局单位

• rem是以根元素（html）的字体大小为基准

• 要做到响应式，先设置html根元素的fontsize，并且让其能根据浏览器视口（viewport）大小而改变
  可以定义一个rem.js

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

1. 定义一个function并调用自己，传入document和window两个参数
2. document.documentElement == document.querySelector('html')，获取html元素，由于fontsize的继承性，所有元素默认fontsize都取这个
3. 监听屏幕旋转、resize、DOMContentLoaded事件，发生这些事件，则重新根据新的视口大小调整根元素的fontsize
4. 网页中要定义viewport的宽度为device-width，把viewport大小设置为设备的逻辑宽度，否则viewport会固定为一个值（iphone手机浏览器是980），就做不到响应式了
5. 此处设置在设备逻辑宽度为320的机器上，根元素的fontsize为20px
6. 一个元素高度要设置为40px，只需要考虑逻辑宽度为320的机器，设置为2rem即可，其他逻辑宽度的机器或按比例缩小或放大

• 在入口js中引入rem.js
  main.js

...
import './config/rem'
...

import './config/rem' 作用不是引入模块（这里不需要引入模块），只会执行一遍rem.js