a. 先看乙個函式：
/*
* 設定根元素字型大小
* @param number minsw 最小縮放的裝置螢幕寬度
* @param number maxsw 最大縮放的裝置螢幕寬度
* @param number minfs 最小的寬度對應的字型大小
* @param number maxfs 最大寬度對應的字型大小
* @return undefined
*/function setrootfs(minsw , maxsw , minfs , maxfs));
}
b. rem 單位介紹
既然扯到了rem這個單位，那就有必要先解釋下這個單位具體含義，mdn上的解釋：
注意圖中的畫線部分，rem這個單位需要高版本的瀏覽器支援，不過，rem一般用於移動端布局，所以，基本上無需考慮瀏覽器版本問題，放心用吧。
rem 相對於html（根元素）的font-size大小，自動計算出其具體值。例如下面這個例子：
如果你調整一下html元素的font-size為20px，那麼其結果如下：
也就是說：你能夠通過控制 html 元素的 font-size 大小來動態調整頁面元素的大小！是不是和你心中所想的螢幕自適應不謀而合？？是的，rem單位就是了解決移動端布局而誕生的！
c. 現在我們來說說 setrootfs 這個函式：
這個函式是用來動態設定html元素font-size大小的，也是實現頁面自適應的核心。他提供了四個引數：
引數1：允許動態改變元素大小的裝置螢幕最小寬度
引數2：允許動態改變元素大小的裝置螢幕最大寬度
引數3：允許設定 html 元素 font-size 最小值
引數4：允許設定 html 元素 font-size 最大值
例如，現在我有乙個需求：要求製作出來的手機端頁面支援：裝置寬度最小220px，最大640px。在這個範圍內的裝置瀏覽頁面時，會自動根據不同裝置尺寸自適應等比放大或縮小到合適的大小，以提供最佳效果，絕對不允許出現放大或縮小後，布局錯亂的現象根據這個需求，我們來具體討論下引數1、2與支援頁面在哪個螢幕寬度區間進行縮放有關
引數3、4與縮放精度控制有關，相差越大，縮放後值的計算越精確
setrootfs這個函式的工作原理：
step 1：呼叫函式
var supportminw = 220;
var supportmaxw = 640;
// 之所以 html 最小 font-size 為 0px，是出於 精度控制 + 計算方便 考慮的
// 正常情況下瀏覽器在 font-size 為 12px 時，便無法在調整字型大小
// 不過，由於 rem 單位與瀏覽器是否能夠控制頁面字型大小無關
// 他只關心 html 元素的 font-size 數值大小
// 本來我是想定為 0 的，但是由於 0 的話，會出現計算錯誤的情況
// 所以，出於精度控制 + 方便考慮，minfs 定為 0.01
var minfs = 0.01;
// html 最大 font-size 大小
// 同樣的出於 精度控制 + 計算方便 考慮
// 如果 font-size 太小，例如取，12，那麼，縮放後，元素的實際值會出現很大偏差
// 計算精度不夠導致的，會出現 布局錯亂 的現象
// 如果取個 50、80、90等之類的又不好計算，1000 太誇張了....計算也較複雜
// 所以取 100 我感覺是最合適的，無論是精度控制上，還是計算便利性上，都很不錯
var maxfs = 100;
setrootfs(supportminw , supportmaxw , minfs , maxfs);
// 這是出於使效果更加明顯，互動性更好的目的
window.onresize = setrootfs.bind(null , supportminw , supportmaxw , minfs , maxfs);
function setrootfs(minsw , maxsw , minfs , maxfs));
}
rem布局實現自適應
使用em和rem單位進行布局，相對 百分比布局更加靈活，可以根據瀏覽器的字型大小調整和縮放來相應顯示頁面。但因為em是相對父級元素的font size，想想就複雜。而rem是相對於根元素html的font size進行計算，繞開了複雜的層級關係，更加簡單。瀏覽器預設字型大小為16px，轉化關係為 1...
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...