摘要：單位介紹既然扯到了這個單位，那就有必要先解釋下這個單位具體含義，上的解釋注意圖中的畫線部分，這個單位需要高版本的瀏覽器支持，不過，一般用于移動端布局，所以，基本上無需考慮瀏覽器版本問題，放心用吧。相對于根元素的大小，自動計算出其具體值。

A. 先看一個函數：

/*
 * 設置根元素字體大小
 * @param Number minSW 最小縮放的設備屏幕寬度
 * @param Number maxSW 最大縮放的設備屏幕寬度
 * @param Number minFS 最小的寬度對應的字體大小
 * @param Number maxFS 最大寬度對應的字體大小
 * @return undefined
 */
function setRootFS(minSW , maxSW , minFS , maxFS){
        var minSW = G.getValType(minSW) !== "Number" ? 220  : minSW;
        var maxSW = G.getValType(maxSW) !== "Number" ? 640  : maxSW;
        var minFS = G.getValType(minFS) !== "Number" ? 0.01 : minFS;
        var maxFS = G.getValType(maxFS) !== "Number" ? 100  : maxFS;
        var html  = G(document.documentElement);
        var curSW = html.get().clientWidth;
        var unit  = (maxFS - minFS) / (maxSW - minSW);
        var rootFS;

        curSW  = curSW >= maxSW ? maxSW : curSW;
        curSW  = curSW <= minSW ? minSW : curSW;
        rootFS = minFS + (curSW - minSW) * unit;
        rootFS = Math.max(minFS , Math.min(maxFS , rootFS));

        html.css({
            fontSize: rootFS + "px"
        });
}

咱暫時不討論上面這個函數的具體功效是什么。

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 最大值

參數1、2 與支持頁面在哪個屏幕寬度區間進行縮放有關
參數3、4 與縮放精度控制有關，相差越大，縮放后值的計算越精確

例如，現在我有一個需求：要求制作出來的手機端頁面支持：設備寬度最小220px，最大640px。在這個范圍內的設備瀏覽頁面時，會自動根據不同設備尺寸自適應等比放大或縮小到合適的大小，以提供最佳效果，絕對不允許出現放大或縮小后，布局錯亂的現象

根據這個需求，我們來具體討論下 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);

step 2：原理剖析

function setRootFS(minSW , maxSW , minFS , maxFS){
    //--part1 start-------------------------------------------------------------
    /*** 設置參數默認值 ***/
    
    var minSW = typeof minSW !== "number" ? 220  : minSW;
    var maxSW = typeof maxSW !== "number" ? 640  : maxSW;
    var minFS = typeof minFS !== "number" ? 0.01 : minFS;
    var maxFS = typeof maxFS !== "number" ? 100  : maxFS;
    //--part1 end---------------------------------------------------------------

    //--part2 start-------------------------------------------------------------    
    /*** 定義計算所需變量 ***/
    
    // 根元素
    var html  = document.documentElement;
    // 獲取屏幕尺寸
    var curSW = html.clientWidth;
    // 每 1px 設備屏幕寬度 對應的 html 元素的 font-size 值，即單位量
    var unit = (maxFS - minFS) / (maxSW - minSW);
    // 要設置的 html 元素的 font-size 值
    var rootFS;
    //--part2 end---------------------------------------------------------------
    
    //--part3 start-------------------------------------------------------------    
    /*** font-size 計算 + 范圍限定 ***/
    
    // curSW 的有效范圍限定，即在哪個設備屏幕寬度范圍內進行動態縮放以適應當前屏幕尺寸
    curSW  = curSW >= maxSW ? maxSW : curSW;
    curSW  = curSW <= minSW ? minSW : curSW;
    // 計算出最終的 font-size 值
    rootFS = minFS + (curSW - minSW) * unit;
    // font-size 范圍限定
    rootFS = Math.max(minFS , Math.min(maxFS , rootFS));
    //--part3 end---------------------------------------------------------------
    
    // 設置 html 元素的 font-size 值
    G(html).css({
        fontSize: rootFS + "px"
    });
}