rem

REM的定义：
rem是相对于根元素来设置字体大小的，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需求。

REM与EM、PX的区别：
PX：像素，比较精确的单位，但不好做响应式布局
EM：以父节点font-size大小为参考点，标准不统一，容易造成混乱

REM支持的浏览器：
支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法支持。

REM使用方法示例：
1.html中默认的 font-size:16px; 也就是 1rem = 16px
2.以设计宽度为750px为例，那么定义 font-size:50px; 那么 1rem = 50px，比例为：750/50=15
3.定义页面中的尺寸，就是: 宽度/50 rem（比例为15）。例如：设计稿中dom（20px）的尺寸为：20px/50=0.4rem
4.针对不同屏幕尺寸，按同比例设置font-size（比例仍为15）。相当于1rem 变成对应大小（font-size变小多少，1rem就同比例变小多少）。
5.例如：
屏幕宽度为750px，则html设置的font-size为：750/15 = 50，设计稿中dom（20px）的尺寸为：20px/50=0.4rem，1rem = 50px
屏幕宽度为320px，则html设置的font-size为：320/15 = 21.33….，设计稿中dom（20px）的尺寸依然为：20px/50=0.4rem，1rem = 320/750*50px

如下比例关系：

JS动态设置width：

<script>    (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);</script>

CSS固定样式：以下场景包含了移动端设备绝大多数屏幕尺寸。

html{font-size:50px;}body{font-size:24px;}@media screen and (min-width:320px){    html{font-size:21.333333333333332px;}    body{font-size:12px;}}@media screen and (min-width:360px){    html{font-size:24px;}    body{font-size:12px;}}@media screen and (min-width:375px){    html{font-size:25px;}    body{font-size:12px;}}@media screen and (min-width:384px){    html{font-size:25.6px;}    body{font-size:14px;}}@media screen and (min-width:400px){    html{font-size:26.666666666666668px;}    body{font-size:14px;}}@media screen and (min-width:414px){    html{font-size:27.6px;}    body{font-size:14px;}}@media screen and (min-width:424px){    html{font-size:28.266666666666667px;}    body{font-size:14px;}}@media screen and (min-width:480px){    html{font-size:32px;}    body{font-size:15.36px;}}@media screen and (min-width:540px){    html{font-size:36px;}    body{font-size:17.28px;}}@media screen and (min-width:720px){    html{font-size:48px;}    body{font-size:23.04px;}}@media screen and (min-width:750px){    html{font-size:50px;}    body{font-size:24px;}}