1. 程式人生 > >根據iPhone6設計稿動態計算rem值

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

使用 pan light 屏幕寬度 我們 解決 適應 fixed 連續

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>

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