微信小程序开发——从px到rpx

我一直在想我是否有必要再写一遍这个部分，或者给你提供一些阅读链接。

因为单位的定义是比较官方的。没什么好讨论的。让我在这里做一个总结和简单的解释。

首先，本文仅以移动设备为例。

摘要：本文中，如果设计师基于iphone6设计草图，1rpx=0.5px=1个物理像素。Photoshop中测量的尺寸是物理像素。因此可以直接使用尺寸数据。

-

[英寸]英寸表示屏幕对角线的长度。如下图所示：

【Pixel Pixel】Pixel是图像的基本采样单位，它不是一个确定的物理量，因为像素的物理大小是不确定的。图：

[分辨率]分辨率是屏幕上的像素数。通常，屏幕宽度的像素乘以屏幕高度的像素。比如iphone6的分辨率是750*1334。

分辨率可以分为[物理分辨率]和[逻辑分辨率]。值得注意的是，在实际工作中，设计师往往给出物理分辨率，而程序中使用的是逻辑分辨率，但都叫分辨率，容易混淆。

【物理分辨率】是硬件支持的分辨率，【逻辑分辨率】是软件可以实现的分辨率。

物理分辨率和逻辑分辨率的商称为【像素放大dpr】，常称为数倍屏。

如下图所示，iphone6的分辨率为375*667，这是指它的逻辑分辨率。上面提到的750*1334是它的物理分辨率。

所以iphone6的像素比是=(750*1334)/(375*667)=2。

理解了上面的概念，我们可以看看下面的单元。

[px] px是Pixel的缩写，意思是像素。作为画面采样的基本单位，没有什么好解释的。

【rem】移动适配最常用的方法是以rem为单位，因为rem会根据html的fontsize动态计算实际px。

所以经常反过来用。即根据屏幕大小，动态设置fontsize。在不同的分辨率下达到同样的效果。

【rpx】rpx其实是微信对rem的一个应用规定，或者说是一个设计方案。官方公布的屏幕宽度为20rem和750rpx。

所以，微信小程序中的1rem=750/20rpx。

但这不是我们的重点。

在使用rem时，我们经常要求设计师按照iphone6的标准来制作设计稿。因为如果标准是iphone6，而fontsize在iphone6上设置为62.5%。

那么1rem等于10px。我们只需要将设计者标注的尺寸(通常标注物理分辨率)除以20就可以得到rem中的数值。

在iPhone6上，屏幕宽度为375px，有750个物理像素，那么750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素。css中的px和设备的物理像素之间没有绝对的一对一关系。

px与物理像素的比率与设备的dpr(像素放大率)有关。

Rpx称为相对像素值，rpx和物理像素之间没有绝对的一一对应关系。

Wxss将设备宽度定义为750rpx，这是基于iPhone6的分辨率(750x1334)。

也就是说，在iPhone6上，1rpx=1个物理像素=0.5px。

因为设计师标注的尺寸一般都是物理分辨率。所以，如果设计稿是基于iphone6的，那么我们就可以直接标rpx而不用转换。

这堂课到此结束。

感谢阅读。