px、em、rem、%、vw、vh、vm这些单位的区别

1.px

px就是像素，也是咱们如今常用的基本单位，好比经常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

2.em

em参考物是父元素的font-size，默认字体大小是16px，因此1em不是固定值，由于它会继承父元素的字体大小

3.rem

rem参考物是相对于根元素，咱们在使用时能够在根元素设置一个参考值便可，相对于em使用，减小很大运算工做量，例：html大小为10px，12rem就是120px

4.%

% 是相对于父元素的大小设定的比率，position:absolute;的元素是相对于已经定位的父元素，position：fixed；的元素是相对可视窗口

5.vm

vm相对于视口的宽度。视口被均分为100单位

h1 {
    font-size: 8vw;
}

再举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px

6.vh

vm相对于视口的宽度。视口被均分为100单位

h1 {
    font-size: 8vh;
}

再举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px

---

总结：

1.vw：1vw等于视口宽度的1%。
  2.vh：1vh等于视口高度的1%。

可是使用起来兼容性不好，仍是不推荐使用，目前用的很舒服的仍是px和rem，

安利一对换算单位的网站，帮助更好的理解如今经常使用的px/em/rem之间的倍数关系：
http://pxtorem.com/ px 换算 rem

http://pxtoem.com/ px 换算 em