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