頁面適配的rem換算

假設咱們規定一個標準，設計圖中apx對應頁面上1rem，也就是對於設備上的基準fontSize=bpx,固然這個bpx是根據具體設備而變的 

bpx = apx * 實際設備分辨率 / 設計圖分辨率,這個關係是固定的，因此咱們能夠在js先計算出這個設備的基準fontSize=bpx

而後在css中設置元素的xrem長度是怎麼計算的呢,假設設計圖中這個元素的長度ylpx

ypx / apx = xrem / 1rem

xrem = ypx / apx * 1rem

        = ypx / apx 

 

代碼以下：

!function(w){
    var d = w.document,
        de = d.documentElement,
        re = 'orientationchange' in w ? 'orientationchange' : 'resize',
        recalc = function () {
            var re = d.body.clientWidth || d.documentElement.cw;
            if ( !re ) return;
            var fs = parseFloat(100 * re / 1180 );
            de.style.fontSize = fs + "px";
        }
if ( !d.addEventListener ) retrun;
w.addEventListener(re, recalc, false);
d.addEventListener('DOMContentLoaded', recalc, false);}(window)