Flexible.js分析

flexible.css

@charset "utf-8";
html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
html,body{font-family:sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}
q:before,q:after{content:''}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
a:hover{text-decoration:underline}
ins,a{text-decoration:none}

flexible.js

(function flexible(window, document) {
    // 获取 html 根元素
    var docEL = document.documentElement;
    // dep 物理像素比
    var dpr = window.devicePixelRatio || 1

    // adjust body font size 设置 body 的字体大小
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 如果页面还没有加载 body 元素, 则 等DOM 元素加载完毕后, 在调用 setBodyFontSize 函数设置 body 的字体大小
            document.addEventListener('DOMContentLoaded', setBodyFontSize);
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10 设置 html 元素的文字大小 
    function setRemUnit() {
        var rem = docEL.clientWidth / 10; // 屏幕大小划分为 10 等份
        docEL.style.fontSize = rem + 'px'
    }
    setRemUnit();

    // reset rem unit on page resize 当页面大小发生变化时, 要重新设置 rem 的 大小
    window.addEventListener('resize', setRemUnit);
    // pageshow 是重新加载页面触发的事件
    window.addEventListener('pageshow', function(e) {
        // persisted 是用来判断是否, 是页面缓存中的页面触发的pageshow事件 返回值是 true | false
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports 有些浏览器不支持 0.5像素的写法
    if (dpr >= 2) {
        var fakeBody = document.createElement('body');
        var testElement = document.createElement('div');
        testElement.style.border = '5px solid transparent'
        fakeBody.appendChild('testElement')
        docEL.appendChild('fakeBody')
        if (testElement.offsetHeight === 1) {
            docEL.classList.add('hairlines')
        }
        docEL.removeChild(fakeBody)
    }
})(window, document)