美文网首页
移动端rem求值

移动端rem求值

作者: 爱忽悠的唐唐在晃悠 | 来源:发表于2017-06-02 10:01 被阅读10次
    (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求值

          本文链接:https://www.haomeiwen.com/subject/aegyfxtx.html