原文
rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對于父元素的字型大小的單位。它們之間其實很相似，只不過乙個計算的規則是依賴根元素乙個是依賴父元素計算。
亞馬遜：
攜程：
蘭亭：上面的**都是採用的流式布局的技術實現的，他們在頁面布局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式布局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的，其實很多視覺設計師應該無法接受這種效果，因為他們的設計圖在大螢幕手機下看到的效果相當於是被橫向拉長來一樣。
流式布局並不是最理想的實現方式，通過大量的百分比布局，會經常出現許多的bug，還有就是對設計師的設計有很多的限制，因為他們在設計之初就需要考慮流式布局，只能設計橫向拉伸的元素布局，設計的時候存在很多侷限性。
還有一種是固定頁面寬度的做法，早期有些**把頁面設定成320的寬度，超出部分留白，這樣做視覺，前端都挺開心，視覺在也不用被流式布局限制自己的設計靈感了，前端也不用在搞坑爹的流式布局。但是這種解決方案也是存在一些問題，例如在大螢幕手機下兩邊是留白的，還有乙個就是大螢幕下看起來頁面會特別小，手機**首頁起初是這麼做的，但近期改版了，可是天貓首頁還沒改版。
上面說過rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小。舉個例子：
html
.btn
demo
上面**結果按鈕大小如下圖：
我把html設定成10px是為了方便我們計算，為什麼6rem等於60px。如果這個時候我們的.btn的樣式不變，我們再改變html的font-size的值，看看按鈕發生上面變化:
html
demo
按鈕大小結果如下：
上面的width，height變成了上面結果的兩倍，我們只改變了html的font-size，但.btn樣式的width,height的rem設定的屬性不變的情況下就改變了按鈕在web中的大小。
其實從上面兩個案例中我們就可以計算出1px是多少rem:
第乙個例子：
120px = 6rem * 20px(根元素設定大值)
第二個例子：
240px = 6rem * 40px(根元素設定大值)
推算出：
10px = 1rem 在根元素（font-size = 10px的時候）；
20px = 1rem 在根元素（font-size = 20px的時候）；
40px = 1rem 在根元素（font-size = 40px的時候）；
在上面兩個例子中我們發現第乙個案例按鈕是等比例放大到第二個按鈕，html font-size的改變就會導致按鈕的大小發生改變，我們並不需要改變先前給按鈕設定的寬度和高度，其實這就是我們最想看到的，為什麼這麼說？接下來我們再來看乙個例子：
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。在不同裝置的寬度計算方式以此類推。
html
@media only screen and ( min - width : 401px )
}@media only screen and ( min - width : 428px )
}@media only screen and ( min - width : 481px )
}@media only screen and ( min - width : 569px )
}@media only screen and ( min - width : 641px )
}上面的做的設定當然是不能所有裝置全適配，但是用js是可以實現全適配。具體用哪個就要根據自己的實際工作場景去定了。
**首頁：m.taobao.com
css中的長度單位rem 響應式
今日閒來，在前端觀察中看到 理解css中的長度單位 覺得不錯，就摘錄下來。css3中也對css中用到的單位進行了改進，單位也就是那幾個，所以我們要搞清楚再用。box line height 1.3em font size 1.3em 元素的行高是當前元素繼承的font size的1.3倍 當前元素的...
css中單位px em以及rem的區別
px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em，rem，但是96 以上的中國網民使用ie瀏覽器 或核心 px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。引...
css中單位px pt em和rem的區別
國內的設計師大都喜歡用px，而國外的 大都喜歡用em和rem，那麼三者有什麼區別，又各自有什麼優劣呢？px 畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。引自css2.0手冊 px 特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其...