em和rem的特点，应用场景以及推荐使用rem

em

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

demo.html

<div class="box1">
    <div class="box2">我最帅！</div>
<div>
<style>
    /*任意浏览器的默认字体高都是16px。1em=16px*/
    width:10em;/*10em=160px*/
    height:5em;/*5em=80px*/
</style>

2.em特点

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

rem

1.rem是一个相对单位。

demo1.html

    <!-- 设置根元素字体为100px -->
    <div class="box">
      <div class="box1">我是rem！</div>
    </div>
    <style>
      html {
        font-size: 100px;
      }
      .box .box1 {
        font-size: 10rem; /*10rem=100px*/
      }
    </style>

2.rem特点

1.rem设置大小时，是相对大小，只相对html根元素的大小。
2.只修改根元素的大小比例来调整所有的文本大小，可以避免字体大小逐层复合的连锁反应
3.当根元素大小改变时，文本大小也随之改变。

推荐使用rem

1.使用最新版的浏览器，推荐使用rem
2.移动端，推荐使用rem。例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。