vw vh vmin vmax這四個單位都是基於視口的
vw vh vw是相對視口（viewport）的寬度而定
長度等於視口寬度1/100,假如瀏覽器的寬度為200px，那麼1vw就等於2px（200px/100）
vh是相對視口（viewport）的高度而定的
長度等於視口高度的1/100假如瀏覽器的高度為500px，那麼1vh就等於5px（500px/100）
vmin、vmax是相對於視口的高度和寬度兩者之間的最小值和最大值,最大（小）視口均分為100px單位
若瀏覽器高為300px、寬為500px，1vmin = 3px，1vmax就是5px；若瀏覽器的高為800px，寬為1080px，那麼1vmin也是8px，1vmax也是10.8px。
rem相對於根元素（html）的字體大小（font-size）來計算的長度單位。
<style type="text/css">html{font-size: 62.5%;} body{font-size: 1.4rem;} </style>若沒有設置html的字體大小，會以瀏覽器默認字體大小，一般是16px。
Tips：由於瀏覽器默認最小字體大小的限制，若設置的根元素字體大小小於默認最小字體大小，那麼就會以默認最小字體大小渲染。eg：在chrome中，最小字體大小是12px，如果你設置的字體大小小於12px，還是會以12px渲染：
<style type="text/css">html{font-size: 62.5%;/* 16px * 62.5% = 10px */}body{font-size: 1.4rem;/* 1.4rem * 12px = 16.8px */}</style>本來想設置body的字體大小為14px，卻是16.8px，就是因為父級html設置的字體10px小於12px，所以採取了12px，那一定要把body設為12px,該如何設置，不設置懸念了，先拋個代碼一看就知道了：）
<style type="text/css">html{font-size: 20px;}body{font-size: 0.6rem;/* 0.7 * 20px = 12px */}</style>提及rem，會想到em，兩者都是相對單位，那兩者有什麼區別？
rem是相對於根元素（html）的字體大小，而em是相對於其父元素的字體大小
em最多取到小數點的後三位
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css">html {font-size: 20px;}body {font-size: 1.4rem; /* 1rem = 20px */padding: 0.7rem; /* 0.7rem = 14px */}div {padding: 1em; /* 1em = 28px */}span {font-size:1rem; /* 1rem = 20px */padding: 0.9em; /* 1em = 18px */}</style></head><body><div> <span></span></div></body></html>在上面的代碼中，根元素（html）的font-size=20px，body的font-size=1.4rem，轉換為像素就是28px（20 × 1.4），接著將div的padding設為1em，由於其基於父元素，所以轉換為像素=28px ( 28 × 1），將span的font-size=1rem，也就是20px，因其自身設置了字體大小，所以padding=1em，轉換為像素=20px(20 × 1）,而不是乘以其父元素的字體大小28px(28 × 1）
Tips:當元素自身設置了字體大小，那麼如果它的其他css屬性也使用em單位，則會基於它自身的字體大小。（如同上面例子的span的padding）
建議使用rem，因為em使用不當的話，當出現多層繼承時，很容易混淆，eg：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css">html { font-size: 20px;}body {font-size: 1em; /* 1rem = 20px */}div {font-size: 0.8em; /* 1em = 16px */}span {font-size: 0.9em; /* 1rem = 14.4px */}</style><body><div> <span></span></div></body></html>使用em時，如果其父輩都是用了em，那麼就會像上面一樣，body繼承其父元素html的字體大小，而div又繼承其父元素body的字體大小，而span又繼承其父元素div的字體大小，最終span的字體大小最終是12.96px（20 × 0.9 ×0.8 × 0.9）,這樣以來每在標籤裡嵌套一個新的標籤，就要根據其父級設置大小，就相當的麻煩而rem總是相對於根元素（html）的，也就是說，不管哪裡使用了rem單位，都是根元素的字體大小 × 數字，由瀏覽器轉為像素值
em和rem的使用範圍
如果這個屬性根據它的font-size進行測量，則使用em,其他的一切事物屬性均使用rem.
多列布局，都不採用，一般使用百分比%
提供px、em、rem單位的轉換工具：http://pxtoem.com/，兼容性查詢：https://caniuse.com/