rem自適應布局-移動端自適應必備代碼

2016-11-01 1743 2 編輯:網頁前端開發伍林 來源:網站開發書籍

由于移動端特殊性,本文講的是如何使用rem實現自適應,或叫rem響應式布局,通過使用一個腳本就可以rem自適應,不用再為各種設備寬度不同而煩惱如何實現自適應的問題。

最近阿里團隊開源的一個庫。使用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。

假如一個元素的寬是160px,在平時,我們可以采用百分比可以做到自適應,假如使用響應式的話,可能需要設置多個,比如在320px,輸出80px,而在640px輸出160px等。

而采用以上rem的方法,則只需要輸出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做計量單位。

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾