rem布局

首先，在介绍 rem 之前，我们先看看 em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 通俗的讲就是： 1em，就是这个元素上的 font-size 的值，如果元素本身没有设置 font-size ，就按照他的父级的 font-size 计算（其实本身的font-size继承了父级的font-size），我们看看代码： .box{font-size:20px; border:1px solid red; overflow:hidden;} .box>.con{width:10em; height:10em; background:#000; color:#fff;} .box>.con_1{float:left;} .box>.con_2{float:right; font-size:30px;}

con1:我没有font-size

con2:我有font-size

em效果
在 con1 中，因为本身没有 font-size ，所以 10em=10(父级的font-size:20px)=200px* ，宽高为 200px 。
在 con2 中，因为本身有 font-size ，所以 10em=10(父级的font-size:30px)=300px* ，宽高为 300px 。
如果用em布局会存在一个问题，进行任何元素设置，都需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险

现在来看看rem
在W3C官网上是这样描述 rem 的—— “font size of the root element (根元素的字体大小)” ，

也就是说，rem 是相对于根元素的，还是用上面的例子：

.box{font-size:20px; border:1px solid red; overflow:hidden;}
.box>.con{width:10rem; height:10rem; background:#000; color:#fff;}
.box>.con_1{float:left;}
.box>.con_2{float:right; font-size:30px;}

con1:我没有font-size

con2:我有font-size

rem效果
因为网页的默认字体大小是 16px，所以 1rem=16px ，10rem=160px ，所以 con1 跟 con2 的宽高为 160px

如何适配各种设备屏幕
了解了 rem 的基本原理，我们来看看如何利用rem来完美适配各种设备屏幕。
理想的适配是把设计稿直接等比缩放在设备上，这样在任何不同的屏幕上布局都会很完美，手淘就是用的 rem 来进行适配的。

我现在讲的是利用我朋友 朱伟友 提供的解决方案 rem.js 来解决适配问题。

事实上 rem.js 是把屏幕等分成 20 份，每份为 1rem ， 1rem 对应的大小就是 rem基准值 ，rem.js 做的就是把 rem基准值 给的 font-size ，所以如果设备的 物理像素 宽为 640px ，那么 1rem=640px/20=32px , 的 font-size为32px 。

因为 rem.js 是作用在上，所以页面引入的时候最好是放在所有资源之前，例如：

这是演示文本

这是演示文本

/* rem.js文件内容 */
(function () {
var html = document.documentElement;

function onWindowResize() {
    html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
}

window.addEventListener('resize', onWindowResize);
onWindowResize();

})();
在我们实际切图的时候，对于视觉稿上的元素尺寸换算，只需要元素的 原始的px值(即你量的大小) 除以 rem基准值 即可。例如设计稿的大小为640px， rem基准值 = 640px/20 = 32px ，有个元素的大小你量出来是 140px286px* ，那么换算过来就是：

140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem
px自动转换为rem
在实际生产当中，如果每一次计算 px 转换 rem，会非常麻烦，所以我们要用由手淘团队 @正霖 开发的 px值转rem值的Sublime Text3自动完成插件 CSSREM 。

插件使用方法：
打开 Sublime Text3 > preferences > 浏览程序包
打开sublime text的插件包
把 cssrem 文件夹放进去（路径 *\Sublime Text3\Data\Packages\）
放入cssrem
放进去后，会在 preferences > Packge settings 下有 cssrem
Packge settings下查看
打开 preferences > Packge settings > cssrem > Settings Default ，全选复制
配置cssrem
打开 preferences > Packge settings > cssrem > Settings User ，粘贴，把 “px_to_rem” 的值变为设计稿的 rem基准值(设计稿宽度/20)，保存
设置rem基准值
在用的时候有弹出框就证明成功了