适配rem

作者: 卓小生 | 来源:发表于2018-04-22 00:11 被阅读0次

    PPI 计算

    var  width = window.screen.width ,
         height =  window.screen.height,
         PPI =  Math.sqrt( Math.pow(width ,2) + Math.pow(height ,2) ) / 屏幕尺寸
    

    适配rem

    (function(){
        var docEl = document.documentElement;
        //当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,
        //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
        //总来的来就是监听当前窗口的变化,一旦有变化就需要重新设置根字体的值
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            //设置根字体大小
            docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
        };
    
    //绑定浏览器缩放与加载时间
    window.addEventListener(resizeEvt, recalc, false);
    document.addEventListener('DOMContentLoaded', recalc, false);
    })()
    

    相关文章

      网友评论

          本文标题:适配rem

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