移动端页面使用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;
}