rem这是个低调的css单位，近一两年开始崭露头角，许多使用者对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是在进行app开发或者叫做响应式布局的时候，它还是一个强力的候选手段之一。

什么是rem？

rem（font size of the root element）是指相对于根元素（html）的字体大小的相对单位。看到rem一定就会想到em这个单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

为什么使用rem进行布局？

rem适用于web app中，如果是文本 page布局使用rem多多少少会有些兼容问题要处理，但是想想，web app在那个终端是没有的，答案是显而易见的，每个人的终端设备上都有app在使用和运行。

那下面我们就看看，如何在项目中使用rem。

适配不同屏幕进行布局

就拿iphone来说，一个系列6，就有两种大小，导致的移动端的屏幕种类更加的混乱，而rem根据不同的屏幕设定不同的根元素字体大小，来分别控制每一个结构的样式。
浏览器的兼容性

rem是CSS3新的一个度量单位，那么有哪些浏览器在支持呢，其实还蛮多的，例如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。看看是不是咱们的老朋友IE6-8不支持呀，没关系，rem一般用在终端设备上，所以IE6-8我们其实是可以不考虑的。

那么在进行rem布局前，我们需要先动态获取每一个移动设备的宽度和我们的字体大小进行换算，设置出一个统一的值，这需要JS的配合。

(function () {
    var winW = document.documentElement.clientWidth, desW = 640, htmlFont = winW / desW * 100;
    if (winW >= 640) {//当屏幕的宽度大于设计稿的宽度是，整个区域最宽640
        $('.musicBox').css({//可在css中写
            width: desW,
            margin: "0 auto"
        });
        window.htmlFont = 100;
        return;
    }
    window.htmlFont = htmlFont;//将变量转为全局变量传递出函数作用域
    document.documentElement.style.fontSize = htmlFont + "px";//设置html根元素的字体大小
})();

一般在做rem布局的时候，有可能会配合媒体查询来进行密集断点的设置。这样操作的话，可以省略JS动态获取，但是咱们还是推荐动态获取这种方法，简化操作并且精简代码，例如每一个分辨率都设置一个根元素的字体大小。

@media screen and (min-width: 320px) {
    html {
        font-size: 100px;
    }
}

@media screen and (min-width: 360px) {
    html {
        font-size: 112.5px;
    }
}

@media screen and (min-width: 400px) {
    html {
        font-size: 125px;
    }
}

@media screen and (min-width: 440px) {
    html {
        font-size: 137.5px;
    }
}

@media screen and (min-width: 480px) {
    html {
        font-size: 150px;
    }
}

@media screen and (min-width: 640px) {
    html {
        font-size: 200px;
    }
}

html {
    font-size: 31.25vw;
}

下面我们举个栗子说一下：
设计稿如果是640px的宽度，那么我们设置根元素字体大小为100px，那么整个页面的宽度就是多少呢，每错就是6.4rem，那么简单了，如果页面上的一个模块的大小为20px*20px，那么这个模块的宽高怎样设置呢？

<style>
html{
    font-size:100px;
}
div{
    width:.2rem;
    height:.2rem;
}
img{
    width:1.65rem;
    height:1.65rem;
}
</style>
<div>20*20<div>
<!--这个图片是165px*165px-->
<img src="http://www.zhufengpeixun.cn/themes/jianmo2/images/pic_04.png" />

看rem布局其实就是这样简单，只需要进行简单的换算就可以达到我们想要的效果。
那么rem也有一些缺点，例如对于文字的描述，可能会出现不协调的现象，模块和模块的距离会和设计稿的效果有所偏差，如果对还原度要求高的网站，可能就玩转不起来了。