px

px就是pixel畫素的縮寫，相對長度單位，網頁設計常用的基本單位。畫素px是相對於顯示器螢幕解析度而言的

em

em是相對長度單位。相對於當前物件內文字的字型尺寸（參考物是父元素的font-size）

如當前父元素的字型尺寸未設定，則相對於瀏覽器的預設字型尺寸

特點：

　　1. em的值並不是固定的；

　　2. em會繼承父級元素的字型大小

rem

rem是CSS3新增的一個相對單位，rem是相對於HTML根元素的字型大小（font-size）來計算的長度單位

如果你沒有設定html的字型大小，就會以瀏覽器預設字型大小，一般是16px

html{font-size: 62.5%}  /* 10 ÷ 16 × 100% = 62.5% */

body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */

/*在根元素中定義了一個基本字型大小為62.5%（也就是10px。設定這個值主要方便計算，如果沒有設定，將是以“16px”為基準 ）*/

em與rem的區別：

　　rem是相對於根元素（html）的字型大小，而em是相對於其父元素的字型大小

vw、vh

vw、vh、vmax、vmin這四個單位都是基於視口

vw是相對視口（viewport）的寬度而定的，長度等於視口寬度的1/100

假如瀏覽器的寬度為200px，那麼1vw就等於2px（200px/100）

vh是相對視口（viewport）的高度而定的，長度等於視口高度的1/100

假如瀏覽器的高度為500px，那麼1vh就等於5px（500px/100）