自适应rem布局

rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理。用rem单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。

一，rem是什么？

rem和em单位一样，都是一个相对单位，不同的是em是相对于元素的父元素的font-size进行计算，rem是相对于根元素html的font-size进行计算，这样一来rem就绕开了复杂的层级关系，实现了类似于em的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem。

二，自适应处理：

使用rem布局的时候，为了兼容不同的分辨率，我们应该要动态的修正根字体的大小，让所有的用rem单位的子元素跟着一起缩放，从而达到自适应的效果。

一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改html的font-size，代码如下：

var docEl = document.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
        }
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);