em和rem的区别

在css中，用的最多的就是px，em，rem三个长度单位，这三个单位的区别就是：

• px是固定的单位长度，一旦设置了就无法随页面的大小而适应改变。
• em是相对长度单位，比px更具灵活性，em的长度是相对于父元素
• rem的长度是相对于根元素，也就是html的字体大小

一、em的使用

1、子元素设置em，大小是取决于父元素字体的大小

2、元素的的width，height，margin，padding用em的话是取决于该元素的font-size的大小

em的继承效果

1、使用em存在继承效果，每个元素都自动继承其父元素的字体大小

2、只要父级元素及上面一直有fontsize为em单位，则会一直继承，但假如自己设置了font-size的单位为px的时候，则会直接使用自己的px单位的值。

看如下代码

<div class="parent">
  我是父元素
  <div class="son">
    我是子元素
    <div class="sun">
      我是孙元素
    </div>
  </div>
</div>
<style scoped>
  .parent {
    font-size: 40px;
    width: 10em; /* 根据规则 此时元素的宽是400px */
    height: 10em; /* 400px */
    border: solid 1px blue;
  }
  .son {
    font-size: 0.5em; /* 20px */
    width: 10em; /* 200px */
    height: 10em; /* 200px */
    border: solid 1px crimson;
  }
  .sun {
    font-size: 0.5em;
    width: 10em;
    height: 10em;
    background-color: salmon;
  }
</style>

效果如下

根据em的继承规则，孙元素的font-size应该是10px，宽和高是100px，但是此时在谷歌浏览器上却不是这么显示的，因为谷歌浏览器的最小字体大小设置是12px，所有小于12px的字体均显示为12px，可以通过css3的transform的scale()方法来解决。

 所以现在孙元素的字体大小为12px，宽和高为100px。可以通过设置一个px大小的div来对比看

<div class="parent">
  我是父元素
  <div class="son">
    <div class="sun">
      <span>我是孙元素</span>
    </div>
    <div style="width: 100px;height: 100px;background-color: #42b983;float: left">
      <span style="font-size: 12px"> 12px大小的字体</span>
    </div>
  </div>
</div>

效果

 谷歌浏览器的默认字体是16px

 二、rem的使用

rem是css3新引进的一个度量单位。rem的长度是相对于根元素，既html的长度，通常是给html设置一个标准值，然后其他元素设置rem都是以html的标准值为1单位来设置。

当用rem做响应式时，直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变。

比如设置html的font-size为12px，

<div class="parent">
  我是父元素
  <div class="son">
    我是子元素
    <div class="sun">
      我是孙元素
    </div>
  </div>
</div>
<style scoped>
  .parent {
    font-size: 3rem;/* 36px */
    width: 50rem; /* 600px */
    height: 50rem; /* 600px */
    border: solid 1px blue;
  }
  .son {
    font-size: 2rem; /* 24px */
    width: 30rem; /* 360px */
    height: 30rem; /* 360px */
    border: solid 1px crimson;
  }
  .sun {
    font-size: 1rem;/*12px*/
    width: 20rem;
    height: 20rem;
    background-color: salmon;
  }
</style>

效果