258资源分享网

最近在负责有赞的某个业务的微信小程序开发，这是我第一次着手微信小程序的开发，这个过程中发现微信小程序所定义的一套 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，还有它与 px 之间什么关系？什么是物理像素？
为了更好理解 rpx，我打算聊聊下面的一些概念：

像素 (Pixel)

PPI (Pixels per inch 每英尺像素)

DPR (Device pixel ratio)

像素，英文单词：pixel，是英语单词 「picture」的简写 「pix」