关于rem和em的区别
rem
rem:
表示根元素的字体大小（通常为<html>）下面是一个动态设置html字体大小的公式
~function () {
window.addEventListener('resize', computed);
// 添加事件，当设备尺寸改变，就执行computed函数
computed();
function computed() {
var deviceW = document.documentElement.clientWidth || document.body.clientWidth;
// 获取设备的宽度
if (deviceW > 640) return;
// 当前案例是以640的设计稿为例，判断，若是设备尺寸超过640，就不在执行computed
document.documentElement.style.fontSize = deviceW / 640 * 100 + 'px';
// 100 这里的100是在屏幕尺寸为640的时候，html字体大小为100px，之所以设置100，是为了便于计算
// 设置html的字体大小 这里是以640的设计稿为基准，当我们使用的设备宽度（deviceW）刚好为640的时候，html的 字体大小为100px; 当设备大小改变，小于640的时候， 就会触发resize函数，computed执行，动态的获取设备的宽度，然后除以640，就能计算出当前设备大小是原设计稿的百分之多少，然后乘以100，就能计算出当前屏幕宽度下html的字体大小为多少 }
}();
document.documentElement.style.fontSize=xxxx 这里是设置html字体大小- 以当前的计算公式，若是设备尺寸为640，计算后
html的字体大小为100px;1rem就是100px; 若是屏幕尺寸缩小到320，computed函数会自动获取屏幕的宽度，重新计算html的字体大小，此时html字体大小应为50，所以1rem就等于50px，- 而我们布局采用
rem布局，width:.5rem, 意思就是某个物体的宽度值相对于html的字体大小的值的百分比，width:.5rem就是width的值相对于html字体大小的百分比为50%。因为html随着屏幕的大小改变，会不停的变化，所以width的值也会跟着改变
em
- em和rem一样都是相对单位，只不过em是以父级的font-size值决定的,当最近的父级没有设置font-size时，就会向上一层找，若是还没有就会一直向上找，直到找到html，若是还没有，就按浏览器默认字体大小，16px(在火狐和chrome);
px
- PX实际上就是像素，用PX设置字体大小时，比较稳定和精确
- 一般浏览器支持的最小字体大小应该为12px;
