根據iPhone6設計稿動态計算rem值

rem

機關在做移動端的h5開發的時候是最經常使用的機關。為解決自适應的問題，我們需要動态的給文檔的更節點添加

font-size

值。使用

mediaquery

可以解決這個問題，但是每一個檔案都引用一大串的

font-size

值很繁瑣，而且值也不能達到連續的效果。

就使用js動态計算給文檔的

fopnt-size

動态指派解決問題。

使用的時候，請将下面的代碼放到頁面的頂部（head标簽内）；

/**
 * [以iPhone6的設計稿為例js動态設定文檔 rem 值]
 * @param  {[type]} currClientWidth [目前用戶端的寬度]
 * @param  {[type]} fontValue [計算後的 fontvalue值]
 * @return {[type]}     [description]
 */
<script>
    var currClientWidth, fontValue,originWidth;
    //originWidth用來設定設計稿原型的螢幕寬度（這裡是以 Iphone 6為原型的設計稿）
    originWidth=375;
    __resize();

	//注冊 resize事件
    window.addEventListener('resize', __resize, false);

    function __resize() {
        currClientWidth = document.documentElement.clientWidth;
        //這裡是設定螢幕的最大和最小值時候給一個預設值
        if (currClientWidth > 640) currClientWidth = 640;
        if (currClientWidth < 320) currClientWidth = 320;
        //
        fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + '%';
    }
    </script>
           

你也可以關注我的新浪微網誌進行交流