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