1.rem（font size of the root element）是指相對於根元素的字型大小的單位，em（font size of the element）是指相對於父元素的字型大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。二者都是相對單位

2.我們現在在切頁面佈局的使用常用的單位是px，這是一個絕對單位，web app的螢幕適配有很多中做法，例如：流式佈局、限死寬度，還有就是通過響應式來做，但是這些方案都不是最佳的解決方法， 例如流式佈局的解決方案有不少弊端，它雖然可以讓各種螢幕都適配，但是顯示的效果極其的不好，因為只有幾個尺寸的手機能夠完美的顯示出視覺設計師和互動最想要的效果，但是目前行業裡用流式佈局切web app的公司還是挺多的；

流動佈局都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式佈局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的，其實很多視覺設計師應該無法接受這種效果，因為他們的設計圖在大螢幕手機下看到的效果相當於是被橫向拉長來一樣。流式佈局並不是最理想的實現方式，通過大量的百分比佈局，會經常出現許多相容性的問題，還有就是對設計有很多的限制，因為他們在設計之初就需要考慮流式佈局對元素造成的影響，只能設計橫向拉伸的元素佈局，設計的時候存在很多侷限性。

## 2.固定寬度做法

還有一種是固定頁面寬度的做法，早期有些網站把頁面設定成320的寬度，超出部分留白，這樣做視覺，前端都挺開心，視覺在也不用被流式佈局限制自己的設計靈感了，前端也不用在搞坑爹的流式佈局。但是這種解決方案也是存在一些問題，例如在大螢幕手機下兩邊是留白的，還有一個就是大螢幕手機下看起來頁面會特別小，操作的按鈕也很小，手機淘寶首頁起初是這麼做的，但近期改版了，採用了rem。

3.響應式做法

#### 響應式這種方式在國內很少有大型企業的複雜性的網站在移動端用這種方法去做，主要原因是工作大，維護性難，所以一般都是中小型的門戶或者部落格類站點會採用響應式的方法從web page到web app直接一步到位，因為這樣反而可以節約成本，不用再專門為自己的網站做一個web app的版本。

4.設定viewport進行縮放

天貓的web app的首頁就是採用這種方式去做的，以320寬度為基準，進行縮放，最大縮放為320*1.3 = 416，基本縮放到416都就可以相容iphone6 plus的螢幕了，這個方法簡單粗暴，又高效。說實話我覺得他和用接下去我們要講的rem都非常高效，不過有部分同學使用過程中反應縮放會導致有些頁面元素會糊的情況

rem能等比例適配所有螢幕

上面說過rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小。舉個例子：

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

為什麼6rem等於120px。如果這個時候我們的.btn的樣式不變，我們再改變html的font-size的值，看看按鈕發生上面變化(font-size:40px; width:240px):

其實從上面兩個案例中我們就可以計算出1px多少rem:

第二個例子：

240px = 6rem * 40px(根元素設定大值)

1rem=根元素設定的大小，單位px；如：

10px = 1rem 在根元素（font-size = 10px的時候）；

20px = 1rem 在根元素（font-size = 20px的時候）；

40px = 1rem 在根元素（font-size = 40px的時候）；

5.我們知道改變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。在不同裝置的寬度計算方式以此類推。

通過JS去動態計算根元素的font-size，這樣的好處是所有裝置解析度都能相容適配，淘寶首頁目前就是用的JS計算。但其實不用JS我們也可以做適配，一般我們在做web app都會先統計自己網站有哪些主流的螢幕裝置，然後去針對那些裝置去做media query設定也可以實現適配，例如下面這樣：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}