有何区别？
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；
