在最近的移動端布局當中，最炙手可熱的方式便是使用rem進行元素的布局。以下便是從最近的文章中所總結出來的一點東西。
首先，我們必須有以下的疑問：
rem的本質是什麼？
rem如何實現自適應布局？
如何根據設計稿來調整rem的值？
rem布局是能純css還是必須js進行輔助？
接著，我們來稍微解答或者解決以上的問題
一.rem的自適應原理
rem（font size of the root element）是指相對於根元素的字型大小的單位，既是乙個相對的計量單位。而於此類似的便是em（font size of the element）是指相對于父元素的字型大小的單位。所以，兩個都是相對計量單位。區別在於乙個相對於根元素，乙個相對于父元素。rem就是根據html的font-size大小來進行的變化。基於該原理，可以在每乙個裝置下根據裝置的寬度設定對應的html字型大小，從而實現自適應布局。
二.rem 的值
目前有兩種，一種是根據js來調整html的字型大小，另一種則是通過**查詢來調整字型大小。
三.移動端使用rem布局
在採用rem之前移動端的主流適配方案
1.流式布局（百分比布局）
優點: 簡單方便,使用簡單,只需固定高度即可,寬度自適應 ；
缺點: 在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調；
2.固定寬度
優點: 與裝置寬度做等比縮放 ；
缺點: 在大螢幕手機下兩邊是留白的，還有乙個就是大螢幕手機下看起來頁面會特別小，操作的按鈕也很小，手機**首頁起初是這麼做的,但最後改版了，採用了rem；
3.響應式做法
缺點:工作量大，維護性難,這種方式在國內很少有大型企業的複雜性的**在移動端用這種方法去做；
採用rem的優勢
開頭提過rem是指相對於根元素的字型大小的單位,網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小。
html.btn
此時，我們會發現整個按鈕大小是60px*30px。如果我們將根元素的font-size更改為20px，按鈕就會變成120px*60px。是之前的等比放大。
所以。我們僅僅是改變了根元素html的font-size，而.btn元素的width，height的rem屬性不變，就實現了按鈕在web中的改變。
所以，得出
1rem = 10px 在根元素的 font-size = 10px 的時候；
1rem = 20px 在根元素的 font-size = 20px 的時候；
1rem = 40px 在根元素的 font-size = 40px 的時候；
在上面兩個例子中我們發現第乙個案例按鈕是等比例放大到第二個按鈕，html font-size的改變就會導致按鈕的大小發生改變，我們並不需要改變先前給按鈕設定的寬度和高度，其實這就是我們最想看到的。
正是基於這個出發，我們可以在每乙個裝置下根據裝置的寬度設定對應的html字型大小，從而實現了自適應布局。
三.現在rem主流的適配有兩種方案：
1.rem隨裝置寬度做自適應，scale值固定為1 ;
2.rem隨裝置寬度做自適應,viewport進行縮放，scale值不固定;
Rem 自適應布局
1.先引入一下js,到頭部的script標籤的最前面。2.根據設計稿大小，調整裡面的最後兩個引數值。3.使用1 rem 100px轉換你的設計稿的畫素，例如設計稿上某個塊是100px 300px,換算成 rem則為1 rem 3rem。上面的 如果在 uc瀏覽器下橫屏與豎屏轉換，發現 並沒有 自適應...
自適應rem布局
自適應處理 假設 function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,fals...
rem自適應布局
使用rem實現自適應布局，應該算是當前移動前端的一大趨勢，有些人對此還有點迷惑，搞不懂rem是如何實現自適應布局，如何根據設計稿來調整rem的值？rem布局如何用雪碧背景？rem一定要載入js嗎？rem的根html font size設定為多少合適？看看這篇文章，也許能幫到你。目前有兩種，一種是根據...