有何区别？

• px： 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；

• em：相对单位，会继承父级元素的字体大小，代表倍数。

• rem：相对单位，始终是基于根元素HTML的，代表倍数。

em

有两种情况：

1、作为font-size的单位时，相对于父元素的字体大小

<div class="a">
  <div class="b"></div>
</div>


.a{
  font-size: 16px;
}
.b{
  font-size: 2em;
}

说明：1em = 16px，所以子元素font-size等于32px

2、作为非font-size的单位时，相对于自身的字体大小。

<div class="a">
  <div class="b"></div>
</div>


.a{
  font-size: 16px;
}
.b{
  font-size: 32px;
  width:2em;
}

说明：1em = 32px，所以子元素的width等于64px。

rem

有两种情况：

1、作为根元素的单位时，相对于初始字体的大小，即16px。

html{
  font-size: 2rem
}

这时候rem作为根元素html的单位，所以1rem = 16px。

所以相等于：

html{
  font-size: 32px
}

2、作为非根元素单位时，相对于根元素的字体大小。

html{
  font-size: 32px
}
p{
  font-size: 2rem
}

这时rem作为非根元素的单位，1rem = 32px。
所以相等于：

html{
  font-size: 32px
}
p{
  font-size: 64px
}

---

当然还有vw和vh。
简单了解一下：

vw 等于视口宽度的 1/100；

vh 等于视口高度的 1/100；