1、为什么要使用rem？
手机页面自适应，不同设备上看的效果更好，更精确。
- 引用简单，布局简便
- 根据设备屏幕的DPR,自动设置最合适的高清缩放。
- 保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
- 有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）
2、dpr什么东东？
dpr叫设备像素比。设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系
设备像素比＝物理像素／设备独立像素 （在x方向或者y方向）。看完是不是一脸懵。哈哈，接着往下看呗。
1.物理像素（physical pixel）
一个物理像素是显示器（手机屏幕）上最小的物理显示物理单元，在操作系统的调度下，每一个设备都有自己的颜色值和亮度值。
2.设备独立像素（density-independent pixel）
设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素（比如：css像素），然后由相关系统转换为物理像素。
其实就是简单的理解为平时我们看设计稿时的px是以css像素定义的。
3.为什么是640px？
对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而它的CSS逻辑像素数为320 x 568px。
如果要切移动端页面，你可以先把效果图宽度等比例缩放到640px，很好用。
问：为毛效果图是要640或者750的，我非得弄个666的不行咩？
答：老实说当然可以，不过为了规范，640或者750是相对合适的。
拿Iphone 5s 举例，它的css像素宽度是320px，由于它的dpr=2，所以它的物理像素宽度为320 × 2 = 640px，这也就是为什么，你在5s上截了一张图，在电脑上打开，它的原始宽度是640px的原因。
那 iphone 6 的截图宽度呢？ 375 × 2 = 750
那 iphone 6 sp 的截图宽度呢？ 414 × 3 = 1242
以此类推，你现在能明白效果图为什么一般是 640 ，750 甚至是 1242 的原因了么？（真没有歧视安卓机的意思。。。）
4问：不是 1rem = 100px吗，为什么我的代码写了一个宽度为3rem的元素，在电脑端的谷歌浏览器上宽度只有150px?
答：先说高清方案代码，再次强调咱们的高清方案代码是根据设备的dpr动态设置html 的 font-size，
如果dpr=1(如电脑端），则html的font-size为50px，也就是 1rem = 50px（个人习惯）
如果dpr=2(如iphone 5 和 6），则html的font-size为100px，也就是 1rem = 100px
如果dpr=3(如iphone 6 sp），则html的font-size为150px，也就是 1rem = 150px
如果dpr为其他值，即便不是整数，如3.4 , 也是一样直接将dpr 乘以 50 。
再来说说效果图，一般来讲，我们的效果图宽度要么是640，要么是750，无论哪一个，它们对应设备的dpr=2，此时，1 rem = 50 × 2 = 100px。这也就是为什么高清方案默认1rem = 100px。而将1rem默认100px也是好处多多，可以帮你快速换算单位，比如在750宽度下的效果图，某元素宽度为53px，那么css宽度直接设为53/100=0.53rem了。
5.怎么用rem？
rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);技术参考：https://zhuanlan.zhihu.com/p/25552482/（推荐看）
http://www.jianshu.com/p/b00cd3506782