移动端rem求值

(function(win){
    var dpr, rem, scale,width;
    var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    var metaEl = document.querySelector('meta[name="viewport"]');
    var reCalc=function(){
        dpr = win.devicePixelRatio || 1;
        scale = 1 / dpr;
        width=docEl.getBoundingClientRect().width;
        rem = width * dpr / 10;
        // 设置viewport,进行缩放,达到高清效果
        metaEl.setAttribute('content', 'width=' + dpr * width + ',initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no');
        // 设置data-dpr属性,留作的css hack之用
        docEl.setAttribute('data-dpr', dpr);
        // 动态写入样式
        docEl.firstElementChild.appendChild(fontEl);
        fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
        win.dpr = dpr;
        win.rem = rem;
    }
    reCalc();
// 给js调用的,某一dpr下rem和px之间的转换函数
    win.rem2px = function(v) {
        v = parseFloat(v);
        return v * rem;
    };
    win.px2rem = function(v) {
        v = parseFloat(v);
        return v / rem;
    };
    
})(window)
    

你可能感兴趣的:(移动端rem求值)