首先我们要明确的是什么？

1、rem代表的是根节点html的font-size值，默认值是16px，但是你也可以自行设置html的font-size值，覆盖默认值，例如：html{font-size:10px;}，或者html{font-size:62.5%;} /* 百分比相对于是默认值16px */；

2、从ie6开始各大浏览器厂商就已经约定好了，所以不用担心主流浏览器对rem的兼容性问题；但是仍然存在一些“非主流”的浏览器不兼容rem，这样我们需要在rem的前面写上对应的px值,从而实现优雅降级；

div{

font-size:32px;

font-size:2rem

}

如何利用rem来快速解决不同移动端设备的一个适配问题？

阿里的lib-flexible库，直接引用CDN文件：<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> ， 它可以根据你的设备宽度来自动设置根节点的font-size （rem），这样你就不用利用js对设备的屏幕尺寸进行繁琐的计算以及判断，而可以直接给所有的元素使用rem单位；

但是对于第一次使用rem来做移动端适配的小伙伴还是一步步来，下面是我另外一种解决方案：

首先我们要明确不能使用px单位来做适配，以屏幕由大变小为例。

因为作为css的px像素（又称逻辑像素）单位，在不同的viewport （视口宽度）它所占据的物理尺寸是一样大的，这就决定了px单位在适配方面的局限性，这里我说下我的大致思路和具体实现：

1、通过js获取设备的屏幕宽度；

2、将视口分成10个rem，也就是让1rem=windowWidth / 10；（你也可以分成5个，看个人）；

3、然后通过js给html标签动态设置内联样式（这样就完成了根字体的设置）

4、接下来项目里面所有单位都采用rem设置，无论是图片还是文字，抑或是div等各种标签的尺寸；

下面是我的代码