移动端关于px,rem,em的选择

2016-01-17

先来介绍下这三个单位：

px：px是Pixel（像素）的缩写，相对长度单位，这个是相对于屏幕的分辨率来说的。
em：相对于父亲元素的单位，例如设置body为font-size:62.5%因为游览器默认body是16像素，这样计算就可以使得1em = 10px，方便计算。但是这里会存在一个问题，em是相对于父元素的，例如一个ul是16px即为1.6em，里面有li为1.6em，这样计算的话li的实际font-size为10x16x16，如果里面有其他元素就更麻烦了，这里可以设置li li, li p, li span, li p span, p span{font-size:1em}来重置字体，但是结构复杂的时候就很麻烦了。
rem：root em，看到这个我们就可以理解rem是相对根元素html的，例如如果设置font-size:16px，然后设置p{font-size:1rem},那么这里的p标签就是16px。

接下来说一下几个概念：

物理像素（physical pixel）：一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
设备独立像素（density-independent pixel）：设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
设备像素比(device pixel ratio )：设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到设备像素比 = 物理像素 / 设备独立像素

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

一般来说，为了保持在不同屏幕上字体大小的显示一致，会根据不同屏幕来显示不同的字号，而字体用rem的话误差太大，且不能满足任何屏幕下字体大小看起来一样，所以一般字体用px。宽度，高度这些值则会用rem来显示，接下会有另外一篇文章具体说明这个。

目前我们的设计稿都是750的宽，我们可以用下面的js来设置html字体，并在meta上设置scale,dpr（这里我们以10为基准）：

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 75;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function(v) {
    v = parseFloat(v);
    return v / rem;
};
window.dpr = dpr;
window.rem = rem;

接下来我们可以写两个sass的mixin函数来将px转换成rem以及根据不同的dpr来设置不同字体：

//px2px
@mixin px2px($name, $px){
  @if(data-dpr="1"){
    [data-dpr="1"] & {
      #{$name}: round($px / 2) * 1px;
    }
  }
  @if(data-dpr="1.5"){
    [data-dpr="1.5"] & {
      #{$name}: round($px * 1.5 / 2)* 1px;
    }
  }
  @if(data-dpr="2"){
    [data-dpr="2"] & {
      #{$name}: $px * 1px;
    }
  }
  @if(data-dpr="2.5"){
    [data-dpr="2.5"] & {
      #{$name}: round($px * 2.5 / 2) * 1px;
    }
  }
  @if(data-dpr="2.75"){
    [data-dpr="2.75"] & {
      #{$name}: round($px * 2.75 / 2) * 1px;
    }
  }
  @if(data-dpr="3"){
    [data-dpr="3"] & {
      #{$name}: round($px / 2 * 3) * 1px
    }
  }
  @if(data-dpr="4"){
    [data-dpr="4"] & {
      #{$name}: $px * 2px;
    }
  }
}
//px2rem
@mixin px2rem($name, $px){
    #{$name}: round($px / 10) * 1rem;
}

然后使用的时候就像这样：

1 2	@include px2px('font-size', 28); @include px2rem('width', 400);