生产项目中，关于挪动端装备婚配的题目，一直在运用手淘团队的flexible处理计划。
本日让我们来看一下赫赫有名的flexible的源码是什么模样的。

;(function(win, lib) {
    var doc = win.document;
    ......     //此处声明变量的代码省略
    
    if (metaEl) {
        console.warn('将依据已有的meta标签来设置缩放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，关于2和3的屏，用2倍的计划，其他的用1倍计划
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他装备下，依旧运用1倍的计划
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }
    

    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
      ...   //此处用正则举行rem和px的转换，代码省略
    }
    flexible.px2rem = function(d) {
       ...  //同上
    }

})(window, window['lib'] || (window['lib'] = {}));

（源代码地点：https://github.com/amfe/lib-f…）

在阅读源码前，发起阅读https://github.com/amfe/artic…

前面几段的代码很好明白，假如网页自身有定义的meta标签，则经由过程正则猎取scale和dpr的值，假如网页自身定义了flexible标签，则经由过程正则表达式猎取对应的值。

假如没有设定以上标签，则经由过程window.devicePixelRatio这个变量来猎取dpr。至于dpr是什么呢？上面的文章中有提过，大抵来讲就是关于视网膜屏，js猎取到的宽度值并不等于装备的现实像素值。有的视网膜屏运用2X2四个点来表达一个像素。所以装备的dpr值就是来盘算装备屏幕现实像素和css里像素的比例值的。安卓机的dpr被固定为1（安卓机的婚配太困难了，可能要采用其他的计划来处理）。

然后将经由过程适才一系列推断和步骤取得的dpr值加到document上，假如网页中没有meta元素，则依据方才取得的数值建立并初始化meta元素。

接下来的重头戏来了，这个库的中心函数 refreshRem()。他的功用是：

1.起首取得装备上document元素的宽度值，经由过程getBoundingClientRect()。

2.这里一开始没看懂，为何这里异常高耸的涌现了一个540的数字？翻看了一切issue后，作者团队给我们诠释了（作者原话）：这个540现实上是个履历值，或许最大值，这个履历是怎样得出来的呢？
现在主流手机最大的css像素尺寸，是540（比方devicePixelRatio为2，分辨率是1080×1920的手机），所以用了这个履历值。如许能够让在ipad横屏这类状况下阅读无线页面，不至于由于拉伸适配后体验太差。
换句话说，这个540像素值是手机屏幕能抵达的最大宽度（在斟酌dpr今后），假如有宽度凌驾540的状况，则申明该网页被显现在 dpr凌驾1的大屏安卓机、ipad、PC端上。这时刻，就运用540这个宽度（代码里是dpr*540，除了iPhone不会有dpr凌驾1的状况涌现，所以基本上就是540）作为默许宽度。然后将屏幕宽度除以10作为rem值（模仿vw/vh完成），应用在document元素上，而且将盘算获得的rem值输出到全局变量以供挪用。

（图为PC端翻开嵌入flexible.js的网页时刻的rem和dpr数值）

接下来，经由过程setTimeOut函数，举行函数撙节，监听resize和pageshow事宜，实行refreshRem(）函数。
这里有个题目，为何是监听pageshow事宜而不是load事宜，这里我查了一下材料，发明关于opera和火狐阅读器，pageshow这个事宜会在 退却/行进 这两个行动是也触发，而load事宜由于页面已被加载过，被保存在缓存里，就不会触发了。 所以这里的挑选是监听pageshow事宜。从细节处见功力啊！

末了给body设置font-size，作者团队也诠释了（原话）：
body上设置12 * dpr的font-size值，为了重置页面中的字体默许值，不然没有设置font-size的元素会继续html上的font-size，变得很大。

再阅读了flexible的源码后，我们对运用flexible举行挪动设配婚配的明白又更深了一层，在现实生产中，能够依据需求，写出相符本身须要的婚配代码，取得更好的用户体验。