CSS 之rem
開始的時候為了解決適配的字型問題我們用了em 但是它需要一個參考點
em：一般來說都是以body的font-size = 16px;為基準 所以 我們可以使用1em = 10px 比如說我們使用“1em”等於“10px”來改變預設值“1em=16px”，這樣一來，我們設定字型大小相當於“14px”時，只需要將其值設定為“1.4em”。
“li”的“1.4em”是不是“14px”將是一個問號呢？如果你瞭解過“em”後，你會覺得這個問題是多問的。前面也簡單的介紹過一回，在使用“em”作單位時，一定需要知道其父元素的設定，因為“em”就是一個相對值，而且是一個相對於父元素的值，其真正的計算公式是：
這樣的情況下“1.4em”可以是“14px”,也可以是“20px”，或者說是“24px”，總之是一個不確定值，那麼解決這樣的問題，要麼你知道其父元素的值，要麼呢在任何子元素中都使用“1em”。這樣一來可能又不是我們所需要的方法。
rem單位
CSS3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在W3C官網上是這樣描述rem的——“font size of the root element” 。下面就來詳細瞭解rem。
前面說了“em”是相對於其父元素來設定字型大小的，這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值，，在根元素中設定多大的字型
我在根元素<html>中定義了一個基本字型大小為62.5%（也就是10px。設定這個值主要方便計算，如果沒有設定，將是以“16px”為基準 ）。從上面的計算結果，我們使用“rem”就像使用“px”一樣的方便，而且同時解決了“px”和“em”兩者不同之處。
rem 的等比例適配所有螢幕
rem 根據根元素進行適配 網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小
Demo ：
上面demo中我們知道改變html的font-size可以等比改變所有用了rem單位的元素，所以大家可以通過chrome瀏覽器的除錯工具去切換第三個的demo在不同裝置下的展示效果，或者通過縮放瀏覽器的寬度來檢視效果，我們可以看到不管在任何解析度下，頁面的排版都是按照等比例進行切換，並且佈局沒有亂。只是通過一段js根據瀏覽器當前的解析度改變font-size的值，就簡單的實現了上面的效果，頁面的所有元素都不需要進行任何改變。
怎麼計算出不同解析度下font-size的值？
假設我上面的頁面設計稿給我時候是按照640的標準尺寸給我的前提下，（當然這個尺寸肯定不一定是640，可以是320，或者480，又或是375）來看一組表格。
表格藍色一列是Demo3中頁面的尺寸，頁面是以640的寬度去切的，怎麼計算不同寬度下font-site的值，大家看錶格上面的數值變化應該能明白。舉個例子：384/640 = 0.6，384是640的0.6倍，所以384頁面寬度下的font-size也等於它的0.6倍，這時384的font-size就等於12px。在不同裝置的寬度計算方式以此類推。
Demo3中我是通過JS去動態計算根元素的font-size，這樣的好處是所有裝置解析度都能相容適配，淘寶首頁目前就是用的JS計算。但其實不用JS我們也可以做適配，一般我們在做web app都會先統計自己網站有哪些主流的螢幕裝置，然後去針對那些裝置去做media query設定也可以實現適配，例如下面這樣
