前端多端、多分辨率适配之rem自适应

rem是CSS3里的一种尺寸单位，根据根页面（html）标签的字号匹配大小。比如：<html>的字号font-size:20px,那么CSS设定1rem的页面元素实际上会显示20px的大小，即1rem=<html>标签上设置的字号大小，那么1.2rem就会显示为24px的大小。与em的用法有些类似，但rem只认<html>标签的字号。

rem的强大之处是不仅可以作为字号的尺寸单位，还可以用于其他地方，这项规则同样适用width、margin、padding及radius等可以设置大小尺寸的地方。这样，如果整个页面的容器元素尺寸都是以rem为单位，我们只需要根据当前浏览器分辨率动态的设置根目录的字号尺寸，页面就可以自动地去适应分辨率了。

但，html的font-size应该如何设置呢，在不同的分辨率或者屏幕大小下，我们应该将该值设置为多少呢？解决这个问题，首先是需要一个参照的，这个参照就是设计稿，一般而言，设计师在输出设计稿时会用px做尺寸单位，那么同时需要说明，该设计稿是在多大的屏幕下的设计稿，且该屏幕下标准的文字大小是多少。以最常见的640像素宽度的移动端页面设计稿为例：稿子上有一个12px的标准文字，该文字是在该像素宽度屏幕下的标准通用文字大小，这时，我们可以把页面里<html>标签的字号设置成font-size:120px,那么12px的文字字号是1rem,然后根据页面当前的宽度动态地缩放这个根目录的字号，就可以达到文字和容器自适应的目的了。

我们可以使用一小段javascript来实现该功能：

（function(){
    var html = document.documentElement;
    function setFont() {
        var cliWidth = html.clientWidth;
        html.style.fontSize = 12*(cliWidth/640)+'px';
    }
    setFont();
    window.onresize = function(){
        setFont();
    }
})();

注意：应避免将基础像素设置为小于12px的值，因为在小分辨率下容易导致页面的rem倍数错乱。

当完成了这一步，就可以把页面中的所有尺寸都以rem为单位去写，页面中的所有元素就可以根据浏览器分辨率自动地按比例去适应了。