移動端自適應：flexible.js可伸縮布局使用

阿里團隊開源的一個庫。flexible.js，主要是實現在各種不同的移動端界面實現一稿搞定所有的設備兼容自適應問題。

實現方法：

通過JS來調整html的字體大小，而在頁面中的制作稿則統一使用rem這個單位來制作。關鍵代碼如下：

;(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;
        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) {
        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'] = {}));

從上面的代碼，主要是改變了dpx和document的font-size大小。大小為docEl.getBoundingClientRect().width / 10 + 'px';

假設我們的設計稿寬是640的，則html的字體大小則被設為64px.則相當於1rem=64px.(1rem相對於根節點的字體大小)。

假如一個元素的寬是160px,在平時，我們可以采用百分比可以做到自適應，假如使用響應式的話，可能需要設置多個，比如在320px，輸出80px，而在640px輸出160px等。而采用以上的方法，則只需要輸出2.5rem就能實現統一，如下表格：

設備寬度	320px	360px	414px	640px
Html字體大小	32px	36px	41.4px	64px
實際輸出	1rem	1rem	1rem	1rem
設計稿縮放大小	80px	90px	103.5px	160px
實際輸出	2.5rem	2.5rem	2.5rem	2.5rem

以上的2.5rem是怎么得出的呢？

160/64（1rem的基數為64px）=2.5rem;按照官方的說法（750px舉例）

Flexible會將視覺稿分成100份（主要為了以后能更好的兼容vh和vw），而每一份被稱為一個單位a。同時1rem單位被認定為10a。針對我們這份視覺稿可以計算出：

1a   = 7.5px
1rem = 75px 

那么我們這個示例的稿子就分成了10a，也就是整個寬度為10rem，<html>對應的font-size為75px：

這樣一來，對於視覺稿上的元素尺寸換算，只需要原始的px值除以rem基准值即可。例如此例視覺稿中的圖片，其尺寸是176px * 176px,轉換成為2.346667rem * 2.346667rem。

另外大漠還寫了一篇詳細的文章：使用Flexible實現手淘H5頁面的終端適配 里面介紹了一個如何快速轉換rem為px的幾種方法，感興趣的童鞋可以去看看。

也可以看這篇文章：Sass函數功能——rem轉px

另外在使用這個來處理自適應的另一個坑就是css sprite，作者的建議是使用svg，或者icon font.或者base64等其他方案。

另外就是在dpr=2時，小圖片可能會出現模糊，建議以最大的圖片來切圖。

字體建議使用px

在作者的觀點中，是建議描述性的字體使用px，如果有slogan之類大於48px的，可以使用rem，由於使用rem在iPhone5和iPhone6中字體不同，可能出現13px和15px,點陣字體。

顯然，我們在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字號是相同的。也就是說，我們不希望文本在Retina屏幕下變小，另外，我們希望在大屏手機上看到更多文本，以及，現在絕大多數的字體文件都自帶一些點陣尺寸，通常是16px和24px，所以我們不希望出現13px和15px這樣的奇葩尺寸。

如此一來，就決定了在制作H5的頁面中，rem並不適合用到段落文本上。所以在Flexible整個適配方案中，考慮文本還是使用px作為單位。只不過使用[data-dpr]屬性來區分不同dpr下的文本字號大小。

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默認寫上dpr為1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}

為了能更好的利於開發，在實際開發中，我們可以定制一個font-dpr()這樣的Sass混合宏：

@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

有了這樣的混合宏之后，在開發中可以直接這樣使用：

@include font-dpr(16px);

當然這只是針對於描述性的文本，比如說段落文本。但有的時候文本的字號也需要分場景的，比如在項目中有一個slogan,業務方希望這個slogan能根據不同的終端適配。針對這樣的場景，完全可以使用rem給slogan做計量單位。

DEMO

 

原文鏈接：CSS3 flexbox彈性布局實例 版權所有，轉載時請注明出處，違者必究。
注明出處格式：前端開發博客 (http://caibaojian.com/flexbox-example.html)