em和rem的区别

em和rem都是相对单位

1.em        相对于父容器字体大小放大或缩小的单位

浏览器默认字体大小为16px，即如果某个文本没有设置字体大小则默认为16px

（1）当字体大小设置为1em时，则字体大小为1*16px；设置为2em时则为2*16px

  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    p{
      font-size: 2em;
    }
  </style>

  <div class="box">
    <p>你好</p>
  </div>

文本设置2em时，字体大小就为32px        

 （2）父元素的字体大小可以影响 em 值，但这种情况的发生，是因为继承

  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      font-size: 32px;
    }
    p{
      font-size: 2em;
    }
  </style>

  <div class="box">
    <p>你好</p>
  </div>

此时文本字体大小为2*32px=64px        

 2.rem        相对于根元素的字体大小放大或缩小的单位

  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      font-size: 32px;
    }
    p{
      font-size: 2rem;
    }
  </style>

  <div class="box">
    <p>你好</p>
  </div>

当文本字体设置2rem时，字体大小为2*16=32px；此时字体大小跟父元素没有关系，而是相对于html元素，即根元素的大小展示        

 实际应用中为了统一标准，rem因为相对与根元素的大小的原因，会比em应用更广泛