小程序px和rpx

### 一、概览
- CSS样式表中的px，不代表设备实际的物理像素
- 小程序统一规定屏幕宽度为750rpx，机型分辨率不同，rpx与px单位间的比率也不同

| 长度单位 | 名称 | 定义 |
| --- | --- | --- |
| 物理像素 | 物理像素 | 设备能控制显示的最小单位 |
| px | 逻辑像素 | CSS定义的像素点 |
| rpx | 小程序尺寸单位 | 以屏幕宽度除以750作为基准单位 |

例如，MMP调试器中，若默认机型为 iPhone 6，则有 1rpx=0.5px=1物理像素

### 二、不同的长度单位
1. #### 物理像素与逻辑像素
	- 物理像素
指的是设备能控制显示的最小单位。众所周知，设备可控的物理像素数量越多，设备能够显示的画面内容细节越多，画面的质量越高。
但是实际上，设备并非直接使用物理像素，而是使用逻辑像素作为长度单位，确定内容在显示区域中的大小。
	- 逻辑像素
作为长度单位，确定内容在显示区域中的大小对于高清设备，一个逻辑像素的长度可能对应多个物理像素。
例如：
	- iPhone 5 中的一个逻辑像素，包含了2*2=4个物理像素的区域；
	iPhone 6 中的一个逻辑像素，包含了3*3=9个物理像素的区域；

为此，引入了不同的设备的物理像素与逻辑像素之比，即设备像素比（device pixel ratio，DPR）的概念。相应的，iPhone 5 与 iPhone 6 的DPR为2，iPhone 6+ 的DPR为3。
在小程序调试器中显示的样式，绝对长度以px为单位，即对应设备的逻辑像素，而非物理像素。

2. #### 小程序尺寸单位
	不同的设备具有不同的逻辑分辨率。为了便于小程序的开发，WXSS（Weixin Style Sheets）提出了新的尺寸单位rpx（responsive pixel），来根据实际设备的屏幕宽度进行自适应。WXSS规定屏**幕宽度统一为750rpx**。

可以将小程序的尺寸单位，理解为建立在CSS逻辑像素上的“二阶逻辑像素”。通过将逻辑像素转换为物理像素，设备将绘制的内容显示出来。同样地，小程序将rpx尺寸单位转换为逻辑像素，以适应具有不同逻辑分辨率的移动端设备。

3. #### 示例

| 设备 | 逻辑分辨率 | rpx/px | 物理分辨率 |rpx/物理像素|
| --- | --- | --- | --- | --- |
| iPhone 5 | 320x568 |320/750=0.42 | 640x1136 | 640/750=0.85 |
| iPhone 6 | 375x667 | 375/750=0.5 | 750x1334 | 750/750=1 |
| iPhone 6+ | 414x736 | 414/750=0.552 | 1242x2208 | 1242/750=1.656 |