布局单位 px 和 rpx

刚开始接触微信小程序开发，发现微信小程序所定义的一套 WXSS (WeiXin Style Sheets) 中有一个有趣的长度单位 rpx，即 responsive pixel。 根据官方的描述：

rpx（responsive pixel）， 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

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

为了更好理解 rpx，需要理解像素 (Pixel)概念

像素 (Pixel)

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

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

• 物理像素 Physical pixels
• 逻辑像素 Logical pixels

物理像素

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

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

逻辑像素

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

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

回到rpx

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

三款机器的逻辑像素：

• iPhone5 : 320px x 568px
• iPhone6 : 375px x 667px
• iPhone6 plus : 414px x 736px

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

• px = rpx * n

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

• iPhone5: n = 2.34
• iPhone6: n = 2
• iPhone6 plus: n = 1.81

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

React Native中的屏幕适配

React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

开发中UI图一般都是iPhone6 是 1334px x 750px 的像素分辨率设计的。

React Native中通过 Dimensions 获取三款机器的宽高

• iPhone5 : 320 x 568
• iPhone6 : 375 x 667
• iPhone6 plus : 414 x 736

基于px和rpx的概念对 React Native 简单的适配：

import { Dimensions } from "react-native";
const { width } = Dimensions.get("window")

export default val => width / 750 * val