屏幕像素比(window.devicePixelRatio)

[gdutwyg]

设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系

设备像素比 ＝ 物理像素 / 设备独立像素

物理像素(physical pixel)

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

设备独立像素(density-independent pixel)

设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。

举个例子：

众所周知，iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素；而其dpr为2，根据上面公式，我们可以很轻松得知其物理像素为750pt * 1334pt。

如下图所示，某元素的CSS样式：

width: 2px;
height: 2px；

在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

补充：

flexible的原理

flexible 主要是通过document.documentElement.getBoundingClientRect().width(除以10)来修改html标签的fontSize; 通过window.devicePixelRatio(1除以dpr)来修改meta的scale；

px如何换算成rem

假设设计稿为750px, 某个控件量出宽度200px；通过以下的px2rem换算成rem；

// 如果设计稿是640px,$base-font-size也要改成64px
@function px2rem($px, $base-font-size: 75px) {
   ...
  @return ($px / $base-font-size) * 1rem;
}
// 200px
px2rem(200px) // return 2.666rem

参考

使用Flexible实现手淘H5页面的终端适配