;(function(win, lib) {    var doc = win.document;    var docEl = doc.documentElement;    var metaEl = doc.querySelector('meta[name="viewport"]');    var flexibleEl = doc.querySelector('meta[name="flexible"]');    var dpr = 0;    var scale = 0;    var tid;    var flexible = lib.flexible || (lib.flexible = {});    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;        //var isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g);        if (isIPhone) {            // 對於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');        //Android target-densitydpi=device-dpi        var attribute = 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';        //判斷是否是WebView        var app = getCookie('chelun_appName');        if(app) {            attribute = 'width=device-width,'+attribute;        }        metaEl.setAttribute('content', attribute);        if (docEl.firstElementChild) {            docEl.firstElementChild.appendChild(metaEl);        } else {            var wrap = doc.createElement('div');            wrap.appendChild(metaEl);            doc.write(wrap.innerHTML);        }    }    function getCookie(name){        var maps = {};        var cookArr = document.cookie.split(';')        for(var i in cookArr){            var tmp = cookArr[i].replace(/^\s*/, '');            if(tmp){                var nv = tmp.split('=');                maps[nv[0]] = nv[1] || '';            }        }        return maps[name];    }    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) {        var val = parseFloat(d) * this.rem;        if (typeof d === 'string' && d.match(/rem$/)) {            val += 'px';        }        return val;    }    flexible.px2rem = function(d) {        var val = parseFloat(d) / this.rem;        if (typeof d === 'string' && d.match(/px$/)) {            val += 'rem';        }        return val;    }})(window, window['lib'] || (window['lib'] = {}));

引入flexible.js

這一步其實非常簡單，只要把flexible.js的內容複製出來，在本地新建一個flexible.js的檔案，開啟貼上進去就可以了，我把這個檔案放在了js/lib下面：

接著在html頁面裡面，儘可能早的引入這個js檔案（為了讓適配的效果更快）：

注：使用lib-flexible，通常不要寫：

交給flexible.js自動處理。

然後在chrome的模擬器裡面，選擇iphone6，應該就能看到html的font-size已經被設定為font-size: 75px了：

3. 編寫CSS基本要求：

1）除font-size外，其它大小都根據750標註稿的尺寸，轉換成rem單位的值，轉換方法為：標註稿尺寸 / 標註稿基準字型大小；

2）標註稿基準字型大小 = 標註稿寬度 / 10，如標註稿寬為750，標註稿基準字型大小為75；標註稿寬為640，標註稿基準字型大小為64；（所以淘寶這個方案是可以在任意設計稿尺寸下使用的）

3）如果需要設定font-size，可跟據html的data-dpr屬性來處理，類似下面的寫法：

以安卓下載按鈕的樣式為例，說明這種用法。android.png的尺寸為：414*80，所以css這麼寫：

由於用了less，事先定義了一個變數來儲存標註稿基準字型大小：

@font-size-base: 75;所以px2rem的轉換變得非常容易，如上所示。less編譯之後，會將正確的rem值計算出來：