rem 与 em 的使用
- 在布局中更建议使用 rem 来进行布局（移动端更是），尽量避免 px 的布局
- 因为 rem 基准 font-size 的改动更容易使得页面能够进行整体的缩放
- rem 几乎可以布局所有设计的属性
- 包括 height，width，padding，margin，border，font-size 等等几乎包括了你布局的所有部分
- 一般 rem 基准值的设置为
font-size:20px;或者font-size:125%;
- 因为 16 x 125% = 20px , 16px 又为大多数浏览器默认字体大小
- em 在布局中一般用于一小块的特殊布局
- 比如在成型的配置错误项目下去添加新的页面，因为不能影响原有的布局（就不能使用 rem），所以可以采用 em 的方式，去定义该页面的单独作用域块
- 比如说书写一个组件，如导航菜单的 padding、 margin，line-height 等值就可以用 em 的方式
rem 与 em 的区别
- rem 的大小是相对于
<html></html>标签中定义的 font-size 大小的
- 几乎所有的浏览器默认字体大小均为 16px
- em 的大小是相对于它的父级元素的具体定义了的 font-size 大小的
- font-size 大小为 xx em 的不算，必须找到它的 font-size 定义了具体值的，如百分比或具体数字的，如果没有找到就一直向上找，直至找到符合的父级元素
rem 与 em 的开发时配置问题
- 可以运用 postcss 中的 postcss-pxtorem 插件，来自动将 px 转换为 rem
- 将 rootValue 属性设置为 20（设置为 20 的原因上面提到过），即
rootValue: 20 - 开发设计中
<html></html>标签设置 font-size 的值 / rootValue值 = 1rem
