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

A. 先看一個(gè)函數(shù)：

/*
 * 設(shè)置根元素字體大小
 * @param Number minSW 最小縮放的設(shè)備屏幕寬度
 * @param Number maxSW 最大縮放的設(shè)備屏幕寬度
 * @param Number minFS 最小的寬度對(duì)應(yīng)的字體大小
 * @param Number maxFS 最大寬度對(duì)應(yīng)的字體大小
 * @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"
        });
}

咱暫時(shí)不討論上面這個(gè)函數(shù)的具體功效是什么。

B. rem 單位介紹

既然扯到了 rem 這個(gè)單位，那就有必要先解釋下這個(gè)單位具體含義，MDN 上的解釋：

注意圖中的畫線部分，rem 這個(gè)單位需要高版本的瀏覽器支持，不過，rem 一般用于移動(dòng)端布局，所以，基本上無需考慮瀏覽器版本問題，放心用吧。

rem 相對(duì)于html（根元素）的font-size大小，自動(dòng)計(jì)算出其具體值。例如下面這個(gè)例子：

運(yùn)行效果如下：

如果你調(diào)整一下 html 元素的 font-size 為 20px ，那么其結(jié)果如下：

也就是說：你能夠通過控制 html 元素的 font-size 大小來動(dòng)態(tài)調(diào)整頁面元素的大??！是不是和你心中所想的屏幕自適應(yīng)不謀而合？？是的，rem 單位就是了解決移動(dòng)端布局而誕生的！

C. 現(xiàn)在我們來說說 setRootFS 這個(gè)函數(shù)：

這個(gè)函數(shù)是用來動(dòng)態(tài)設(shè)置 html 元素 font-size 大小的，也是實(shí)現(xiàn)頁面自適應(yīng)的核心。他提供了四個(gè)參數(shù)：

參數(shù)1：允許動(dòng)態(tài)改變?cè)卮笮〉脑O(shè)備屏幕最小寬度
參數(shù)2：允許動(dòng)態(tài)改變?cè)卮笮〉脑O(shè)備屏幕最大寬度
參數(shù)3：允許設(shè)置 html 元素 font-size 最小值
參數(shù)4：允許設(shè)置 html 元素 font-size 最大值

參數(shù)1、2 與支持頁面在哪個(gè)屏幕寬度區(qū)間進(jìn)行縮放有關(guān)
參數(shù)3、4 與縮放精度控制有關(guān)，相差越大，縮放后值的計(jì)算越精確

例如，現(xiàn)在我有一個(gè)需求：要求制作出來的手機(jī)端頁面支持：設(shè)備寬度最小220px，最大640px。在這個(gè)范圍內(nèi)的設(shè)備瀏覽頁面時(shí)，會(huì)自動(dòng)根據(jù)不同設(shè)備尺寸自適應(yīng)等比放大或縮小到合適的大小，以提供最佳效果，絕對(duì)不允許出現(xiàn)放大或縮小后，布局錯(cuò)亂的現(xiàn)象

根據(jù)這個(gè)需求，我們來具體討論下 setRootFS 這個(gè)函數(shù)的工作原理：

step 1：調(diào)用函數(shù)

var supportMinW = 220;
var supportMaxW = 640;
// 之所以 html 最小 font-size 為 0px，是出于 精度控制 + 計(jì)算方便 考慮的
// 正常情況下瀏覽器在 font-size 為 12px 時(shí)，便無法在調(diào)整字體大小
// 不過，由于 rem 單位與瀏覽器是否能夠控制頁面字體大小無關(guān)
// 他只關(guān)心 html 元素的 font-size 數(shù)值大小
// 本來我是想定為 0 的，但是由于 0 的話，會(huì)出現(xiàn)計(jì)算錯(cuò)誤的情況
// 所以，出于精度控制 + 方便考慮，minFS 定為 0.01
var minFS = 0.01;
// html 最大 font-size 大小
// 同樣的出于 精度控制 + 計(jì)算方便 考慮
// 如果 font-size 太小，例如取，12，那么，縮放后，元素的實(shí)際值會(huì)出現(xiàn)很大偏差
// 計(jì)算精度不夠?qū)е碌模瑫?huì)出現(xiàn) 布局錯(cuò)亂 的現(xiàn)象
// 如果取個(gè) 50、80、90等之類的又不好計(jì)算，1000 太夸張了....計(jì)算也較復(fù)雜
// 所以取 100 我感覺是最合適的，無論是精度控制上，還是計(jì)算便利性上，都很不錯(cuò)
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-------------------------------------------------------------
    /*** 設(shè)置參數(shù)默認(rèn)值 ***/
    
    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-------------------------------------------------------------    
    /*** 定義計(jì)算所需變量 ***/
    
    // 根元素
    var html  = document.documentElement;
    // 獲取屏幕尺寸
    var curSW = html.clientWidth;
    // 每 1px 設(shè)備屏幕寬度 對(duì)應(yīng)的 html 元素的 font-size 值，即單位量
    var unit = (maxFS - minFS) / (maxSW - minSW);
    // 要設(shè)置的 html 元素的 font-size 值
    var rootFS;
    //--part2 end---------------------------------------------------------------
    
    //--part3 start-------------------------------------------------------------    
    /*** font-size 計(jì)算 + 范圍限定 ***/
    
    // curSW 的有效范圍限定，即在哪個(gè)設(shè)備屏幕寬度范圍內(nèi)進(jìn)行動(dòng)態(tài)縮放以適應(yīng)當(dāng)前屏幕尺寸
    curSW  = curSW >= maxSW ? maxSW : curSW;
    curSW  = curSW <= minSW ? minSW : curSW;
    // 計(jì)算出最終的 font-size 值
    rootFS = minFS + (curSW - minSW) * unit;
    // font-size 范圍限定
    rootFS = Math.max(minFS , Math.min(maxFS , rootFS));
    //--part3 end---------------------------------------------------------------
    
    // 設(shè)置 html 元素的 font-size 值
    G(html).css({
        fontSize: rootFS + "px"
    });
}