CSS-rem

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。