REM布局

何为em?

em是相对单位。相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

通俗地讲就是：1em = 20px（相对font-size，假设这个元素font-size=20px）,如果元素本身没有设置font-size，就按照他的父级的font-size计算（其实本身的font-size继承了父级的font-size），我们看看代码：

       
con1:我没有font-size
       
con2:我有font-size

em效果

• 在con_1中，因为本身没有font-size，所以10em=10*20px(父级的font-size)=200px，宽高为200px。
• 在con_2中，因为本身有font-size，所以10em=10*30px(自身的font-size)=300px，宽高为300px。

如果用em布局会出现一个问题，进行任何元素设置，都需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。

rem现身

在W3C官网上是这样描述rem的——"font size of root element"(根元素的字体大小)。

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

       
con1:我没有font-size
       
con2:我有font-size

rem效果

因为网页的默认字体大小是16px，所以 1rem=16px，10rem=160px，所以con_1和con_2的宽高为160px

如何适配各种设备的屏幕

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

有人用rem.js来解决问题：
事实上rem.js是把屏幕等分成20份，每份为1rem，如果设备的物理像素宽为640px，那么1rem=640px/20=32px,的font-size为32px。（1rem对应的大小就是rem基准值，rem.js做的就是把rem基准值给的font-size）。

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

  //在这里引入




    
rem布局厉害了
 

/* 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，有个元素大小你量出来是140px*286px，那么换算过来就是：

• 140px=140/32=4.375rem
• 286px=286/32=8.9375rem

px自动转换成rem

在实际生产当中，如果每一次计算px转换rem，就会非常麻烦，所以：
在Sublime Text3中安装插件CSSREM，即可完成自动转换。