页面适配的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)

 

转载于:https://www.cnblogs.com/littlechen/p/9258804.html