移動端頁面使用rem來作適配

文／九彩拼盤（簡書做者）
原文連接：http://www.jianshu.com/p/eb05c775d3c6
著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。

rem介紹

rem（font size of the root element）是指相對於根元素（即html元素）的字體大小的單位。
假設根元素的字體大小是10px, 則5rem的大小爲 5*10=50px,例如

html{
    font-size: 10px;
}
p{
    width: 2rem; /* 2*10 = 20px;*/
    margin: 1rem;
}

 

em來作適配

之前咱們每每這樣作頁面：viewport width 設置爲 device-width，而後選咱們須要兼容設備的最小寬度（通常是320px）。根據這最小寬度來作頁面。單位使用px和百分比。在寬度不一樣的設備上，頁面的字體大小，內容尺寸都是同樣的，不一樣的是，大屏的內容間的空隙比小屏的大。因此這樣作的缺點就是，頁面在某些尺寸的設備上顯示的效果很差。

若是用rem來頁面，咱們會根據不一樣的設備寬度在根元素上設置不一樣的字體大小。寬度越寬，字體越大。而後對本來使用px的地方使用rem來替換。這樣，字體大小，內容尺寸，對隨着屏幕寬度的變大而變大。

具體作法

1 根據不一樣的設備寬度在根元素上設置不一樣的字體大小。
我通常會設置1rem爲1/10屏幕寬度。代碼以下

;(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 540) { // 最大寬度
            width = 540;
        }
        var rem = width / 10; // 將屏幕寬度分紅10份， 1份爲1rem
        docEl.style.fontSize = rem + 'px';
    }

    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);

    refreshRem();

})(window);

 

還有一種方法會根據 devicePixelRatio 設定 initial-scale 來放大 viewport，使頁面按照物理像素渲染，提高清晰度。 代碼見這裏

2 作頁面時
我通常會將設計稿縮小至寬度爲320px（切圖標時，仍是按照原圖來切）。在上一步中，1rem爲1/10屏幕寬度。所以，px與rem的轉化爲 1px = 1 / 320 * 10rem。若是使用Sass能夠用以下的轉化代碼

// rem.scss
@charset "utf-8";
$divide: 10;
$pswWidth: 320;
$ppr: 320px/$divide/1rem;// 定義單位

// https://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
@mixin toRem($property, $values...) {
    $max: length($values);
    $remValues: '';
    @for $i from 1 through $max {
        $value: nth($values, $i) * $divide / $pswWidth;
        $remValues: #{$remValues + $value}rem;
        @if $i < $max {
            $remValues: #{$remValues + " "};
        }
    }
    #{$property}: $remValues;
}

 

而後，在其餘文件中,相似以下進行調用

@import "rem";
.nav-list {
    height: 10px/$ppr;
    @include toRem(margin, 10, 15, 10, 15);
}

 

生成的CSS

.nav-list {
  height: 0.3125rem;
  margin: 0.3125rem 0.46875rem 0.3125rem 0.46875rem;
}