1.

欢迎来我的博客阅读：「谈谈像素以及微信小程序的rpx」

前言2.

最近在负责有赞的某个业务的微信小程序开发，这是我第一次着手微信小程序的开发，这个过程中发现微信小程序所定义的一套WXSS(WeiXinStyleSheets)中有一个有趣的长度单位rpx，即responsivepixel。根据官方的描述：

3.

rpx（responsivepixel），可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx375px750物理像素，1rpx0.5px1物理像素。

4.

平时我们一般会用em或者rem来做屏幕适配，而在微信小程序中，可以方便的借助rpx来完成这项工作。

5.

那么怎么理解rpx，还有它与px之间什么关系？什么是物理像素？为了更好理解rpx，我打算聊聊下面的一些概念：

像素(Pixel)PPI(Pixelsperinch每英尺像素)DPR(Devicepixelratio)像素6.

像素，英文单词：pixel，是英语单词「picture」的简写「pix」，加上「element」的简写「el」，合成的词汇，表示「图像元素」的意思。一个像素只能表达一个色块，是显示的最小的一个单元。

7.

而在我们写代码的时候，可以把像素分为两种：

物理像素Physicalpixels逻辑像素Logicalpixels物理像素8.

也被称为设备像素(Deviceindependentpixels)，即设备在出厂的时候就已经固定了像素。

9.

我们来看一下iPhone6(左图)与iPhone6plus(右图)的官方显示屏的规格说明：

iPhone6iPhone6plus规格10.

iPhone6是1334pxx750px的像素分辨率，意思是当手机竖放的时候，横向有750个物理像素，纵向有1334个物理像素。

逻辑像素11.

在CSS中也被称为CSS像素(CSSpixels)，是为Web开发者创造的，在CSS和JavaScript中使用的一个抽象的层，每一个CSS声明和几乎所有的Javascript属性都使用CSS像素。

12.

例如我们平时使用Chrome的设备调试工具的时候，iPhone6是高667px，宽是375px，与苹果官方的1334pxx750px，长宽分别少了2倍，那么面积就少了4倍。这就是经常说的Retina屏幕用四个(物理)像素表示一个(逻辑)像素。

Chrome下iPhone6逻辑像素PPI13.

Pixelsperinch，每英寸像素，也被称为像素密度，意思是一英寸中有多少个物理像素。其中1英寸(inch)2.54厘米(cm)。

14.

回顾一下上面的iPhone6和iPhone6plus的官方规格说明图，其中有ppi这一项，iPhone6是326ppi，iphone6plus是401ppi。

PPI怎么算出来的？15.

要计算显示器的每英寸像素值，首先要确定屏幕的尺寸和分辨率。PPI计算公式：

PPI计算公式16.

其中，

dp(devicepixel)为屏幕对角线的分辨率wp(widthpixel)为屏幕横向分辨率hp(heightpiexl)为屏幕纵向分辨率di(deviceinch)为屏幕对角线的长度(单位为英寸)。17.

以iPhone6为例：

iPhone6PPI计算18.

四舍五入那便是326ppi了。

物理像素有多大？19.

「物理像素」是有特定长度的，这取决于ppi值。

20.

那么如何求出一个设备的物理像素的长度？因为绝大多数设备的物理像素都是方形的，我们可以假设当前设备的像素是方形的。那么，

iPhone6中每个像素长度：1inch/326ppi≈0.003inch0.0762mmiPhone6plus中每个像素长度：1inch/401ppi≈0.002inch0.0508mm21.

可以看出iPhone6plus的屏幕制作工艺更加精细。因为像素越小，那么单位面积内像素点就越多，显示的效果人眼就越难看出毛刺。用来显示一份图像的像素越多，效果就越接近现实。

22.

和物理像素不同，「逻辑像素」没有特定的物理长度的，只是表示显示设备中最小的显示单元，优秀的显示设备完全可以把显示单元做的更加小，已达到更好的显示效果。

DPR23.

DevicePixelRatio，设备像素比。

24.

在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从iPhone4开始，苹果公司推出了所谓的Retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI太高，人的视网膜无法分辨出屏幕上的像素点。iPhone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是dpr2。

25.

在Chrome浏览器可以通过以下代码获取设备的DPR：

letdprwindow.devicePixelRatio;复制代码26.

而通过下面的代码可以获取设备的逻辑像素：

letlogicalHeightscreen.height;letlogicalWidthscreen.width;复制代码27.

那么很多人看到这里，就会认为：物理像素逻辑像素*dpr但实际情况并不是这样，留意一下iPhone6plus的物理像素和逻辑像素：

物理像素：1080pxx1920px逻辑像素：414pxx736px28.

而官方声称iPhone6plus的dpr3，按理应该是：

414pxx736px→乘以3倍dpr→1242pxx2208px29.

那么iPhone6plus只有1080pxx1920px，怎么去展示1241pxx2208px的分辨率呢？

30.

原来iPhone6plus对逻辑像素做了缩小处理，以适应物理像素，也就是1241pxx2208px除以115%，得到1080pxx1920px。

31.

换句话来说，本来iPhone6plus的dpr2.6，但是通过虚拟技术把物理像素放大115%，以达到dpr3的效果。

32.

所以说是假3倍dpr，其实我们开发和设计的时候也不用管这个，当作它就是3倍dpr就好了。

回到rpx33.

根据官方给出的rpx换算px的实例：

rpx换算px34.

三款机器的逻辑像素：

iPhone5:320pxx568pxiPhone6:375pxx667pxiPhone6plus:414pxx736px35.

rpx转换成px是需要乘以一个系数的：

pxrpx*n36.

其中系数n，是跟着设备改变的：

iPhone5:n2.34iPhone6:n2iPhone6plus:n1.8137.

所以rpx只是定义一个绝对值750宽度，然后简单的根据不同设备的逻辑像素来进行rpx到px的换算。

38.

精明的观众可能发现了，rpx压根就不需要关心DPR和PPI的概念。呃，其实我就是在理解rpx的过程中，拦不住思维的发散，了解了一大堆概念，然后顺道给你们分享一下罢了。

参考39.

Wiki-像素Wiki-每英寸像素iPhone6ScreensDemystified