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