设计稿的100%还原-「REM」引发的思考

# 什么是 rem，为什么用 rem

  REM（font size of the root element），是指相对于根元素的字体大小的单位，是个相对单位，如果不设置根元素的字体大小，则会默认以根元素的16px的大小计算值。
 说到rem，百分九十的面试官会问，rem和em区别是什么？EM（font size of the element），是指相对于父元素的字体大小单位，也是个相对单位。他们之间很类似，但为什么 em 就是火不起来？一段好的程序，讲究的是易于维护，找到元素的大小之后还要去找父元素大小才能理解真正大小，不太方便。
 REM 是css3提出的，它实现了 类似 less / sass 中变量的功能，大大提高了可维护性，实现UI稿百分百的还原效果
 

# 基础案例

 搞移动端开发的小伙伴，最头疼的事情就是适配问题， 但又不得不硬着头皮去解，改了一版又一版。其实能rem帮我们解决很多适配问题。 基础的用法:

<button class="btn">Rem等比例缩放</button>    

html { font-size: 16px; }
.btn {
  width: 8rem;
/*   height： 2rem； */   
  line-height: 2rem;  
  border-radius: 0.25rem;
  background-color: #0a90d3;