CSS-rem

相关布局单位

1.px
px是Pixel的缩写，也就是屏幕上一个像素点，所以px是精准的绝对的，由此它在不同的屏幕上会引起布局错乱的适配问题。

2.em
以父元素的font-size为基准的相对大小， 换算公式：1 ÷ 父元素的font-size × 需要转换的像素值 = em值，
这样一来“em”就是一个相对值，而且是一个相对于父元素的值。在这样的定义下可以预知当存在多层布局结构时，em的计算是十分繁琐的，也会存在无法预知的错误风险。

rem 概念

rem 是在 CSS3 中发布的， W3C的官方描述是：“font size of the root element"，意思就是 rem 是相对于根元素 font-size 的大小。 由于根元素是唯一的，所以rem比em更方便，安全。
默认情况下 1rem 值为 16px (100%)，现在设置 1rem = 14px(62.5%)的情况下看如何计算元素的大小：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

这样下来，html的字体大小为 10px, body的字体大小为 14px, h1的字体大小为 24px。

rem 兼容性

在物理屏幕大小和系统都有差异的移动端，前面说到浏览器默认1rem=16px是不一定的，所以为了在不同大小屏幕下精准实现设计稿的效果，我们需要根据设计稿尺寸（物理屏幕）大小，设定不同 html 的 font-size 。
这里有一个方便的计算工具：grunt-px2rem

扩展阅读：web app变革之rem