补充一个基本知识，不许笑，1rem等于HTML中设置的字体大小（px）
首先，HTML 的 head 部分中加入如下代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。值为 1.0 即原始尺寸。
maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0，即原始尺寸。
minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0，即原始尺寸。
user-scalable：浏览者是否可以手动缩放，yes 或 no 。
然后，引入这段原生js代码
(function (doc, win) {
var docEl = doc.documentElement,
//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return
};
if(clientWidth==375){
docEl.style.fontSize = '10px';
}else{
docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';
}
};
if (!doc.addEventListener){
return;
} ;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
这是rem布局的核心代码，这段代码的大意是：
如果页面的宽度等于了375px（iphone6/6s），那么页面中html的font-size恒为10px，此时1rem=10px,如果一个div宽度是200px,既可以设为20rem。否则，页面中html的font-size的大小为：
10 * (当前页面宽度 /375)
知识点拓展解析：
1.orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。
2.documentElement 属性以一个元素对象返回一个文档的文档元素。HTML 文档返回对象为HTML元素。
3.Document 对象,当浏览器载入 HTML 文档, 它就会成为 document 对象。
document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
4.事件DOMContentLoaded,当初始HTML文档被完全加载和解析时，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。另一个不同的事件load应该仅用于检测一个完全加载的页面。
DOM文档加载的步骤为
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- DOM树构建完成。//DOMContentLoaded
- 加载图片等外部文件。
- 页面加载完毕。//load
在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。