css3中rem详解

rem是css3新增的一个属性，它是一个相对单位，直观上可以说：是相对于html元素字体大小的单位。

1. 兼容性：大多数浏览器都支持，除了IE8以下不支持，但rem一般多用于移动端页面。
2. 优点：在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算。

1、针对设计稿计算rem

---

 所有浏览器都一致默认保持着 16px 的默认字号，rem与px关系为：1rem = 10px，10/16=0.625=62.5%。在这里文档元素设置 font-size: 62.5%，可以很方便的利用十进制进行计算了。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

所以如果我有一个宽度为640的设计稿，通过上面的方法计算出对应元素rem的大小，（注意：实际项目不可以设置为font-size:62.5%,因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的rem计算不准确）。
例子如下：

1、按照习惯，代码如下：

2、调试工具：chrome
效果图尺寸如下：

高度不应该是88px么？为什么差了那么多呢？这是由于：chrome在字体小于12px时都当12px来处理，所以才会有这个误差。
8.8 * 10 = 88 ；
8.8 * x = 105.59; x = 11.999,浏览器计算存在误差，正好不就是12px么。

绕过这个坑，直接讲html字体大小设置成625%，即100px，在看下面的效果：

这样便绕过了88的死穴。

设备适配：

假设项目设计稿是640，就直接将640作为参考，html字体设置为625% 或者100px。88px就可以直接换算成 .88px ；适配其他尺寸的设备，比如：320，88px的元素应该是44px,要是直接计算元素的尺寸，那引入rem就没有任何意义了，直接用媒体查询，将html字体尺寸设置为312.5%即可，元素的尺寸只写一套。一套设计稿，适配n多尺寸的设备，是不是很爽，计算方法：
320 / 640 * 625% = 312.5%
其他尺寸的直接将320换为对应的尺寸即可。

2、针对不同分辨率计算font-size

---

监听浏览器更改 html的font-size。以640的设计稿为基准,可以放入rem.js中，单独引用

法一：

<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 = 100 * (clientWidth / 640) + 'px';
            };
        if(!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

法二：

<script>
    window.onload = function() {
        //640代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等
        getRem(640, 100)
    };
    window.onresize = function() {
        getRem(640, 100)
    };

    function getRem(pwidth, prem) {
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth / pwidth * prem + "px";
    }
</script>