rem是什么
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
动态 REM 方案
1.浏览器禁止 980 像素的缩放（meta:vp 阻止缩放）
2.设置 html {font-size: 页面宽度 / 10 px}
3.10 rem == 页面宽度
4.所有单位都用 rem == 所有长度都以页面宽度为基准
5.页面可以兼容任何手机屏幕
1px 问题
1.在普通屏幕
CSS 1px == 设备的 1px
2.在 Retina 设备
CSS 1px == 设备的 2px
border-width == 设备的 1px
border-width: 0.5px == 设备的 1px （兼容性有问题）
解决方法
页面整体缩放 50% <meta initial-scale=0.5> border-width: 1px == 设备的 1px
副作用所有的 div 都变为原来的 50%
所有长度都以 rem 为基准，让 rem 变为原来的 2倍
1.获取设备像素比（1/2/3）
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
2.initial scale = 1/像素比
3.让 rem 变为 rem * 像素比
4.border-top: 1px solid red;
