rem是什么？
- 絕對單位（absolute units）， 因為無論其他相關的設置怎么變化，指定的值是不會變化的。例如mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
pt, pc: 點（Points (1/72 of an inch)）， 十二點活字（ picas (12 points.)） - 相對單位，他們是相對於當前元素的字號（ font-size ）或者視口（viewport ）尺寸。
- px:絕對單位。因為無論其他相關的設置怎么變化，像素的值是不會變化的。
- ex, ch: 相對單位。分別是小寫x的高度和數字0的寬度。這些並不像em那樣被普遍使用或很好地被支持。
- vw, vh: 分別是視口寬度的1/100和視口高度的1/100，其次，它不像rem那樣被廣泛支持。
- em:相對單位。1em與當前元素的字體大小相同（更具體地說，一個大寫字母M的寬度）。CSS樣式被應用之前，瀏覽器給網頁設置的默認基礎字體大小是16像素，這意味着對一個元素來說1em的計算值默認為16像素。但是要小心—em單位是會繼承父元素的字體大小，所以如果在父元素上設置了不同的字體大小，em的像素值就會變得復雜。
- rem: REM（root em）和em以同樣的方式工作，但它總是等於默認基礎字體大小的尺寸；繼承的字體大小將不起作用，所以這聽起來像一個比em更好的選擇，雖然在舊版本的IE上不被支持。
為什么要使用相對單位？
使用相對單位是非常有用的-你可以相對於你的字體或視口大小來調整HTML元素的大小。
為什么要使用rem？
rem能等比例適配所有屏幕。
如何使用？
html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
html { font-size: 843.75%; }
大多數瀏覽器的默認字號是16px，因此1rem=16px，這樣不方便我們px和rem的換算，假設1rem=10px，那么100px=10rem，25px=0.25rem。這樣就好換算很多，於是就有了上面的10/16。如果是640的設計稿，需要除以2轉化為和iphone5屏幕等寬的320。所以設計稿px單位/2/10轉為rem。之后再媒體查詢設置每個屏幕大小的font-size百分比，頁面會根據上面設置的根font-size適配。
我們通過媒體查詢給不同設備設置根元素的字體大小，從而使頁面在不同的設備上等比縮放。
使用flexible.js
1 引入<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
2 VS Code 安裝插件cssrem
3 如果是750的設計稿將插件的rootFontSize設為75
4 使用：例如設計稿有一個圖片寬200px,高100px
當然，如果你使用 webpack 打包你的項目，可以加入對應 loader 自動轉換單位， 推薦 loader
css2rem。