微信小程序尺寸单位的理解

前言

在使用 CSS 进行移动端的网页开发时，由于不同手机设备的屏幕比，在换算像素单位时会遇到很多麻烦。为了方便开发人员适配各种屏幕WxSS 中加入了新的尺寸单位 rpx 即（responsive pixel，响应式像素)。

移动端网页像素单位的换算难点，在于它有物理像素和逻辑像素两种单位，物理像素是指屏幕上实际有多少个像素，而逻辑像素是指 CSS 中使用的像素单位。例如iPhone6的分辨率为 750px × 1334px，逻辑分辦率为 375px × 667px，经过换算可知1个逻辑像素需要2个物理像素来显示。

为了方便换算，rpx 单位规定了任何手机屏幕的宽度都为 750rpx（逻辑像素），微信小程序内部负责将逻辑像素转换为当前手机中的物理像素。也就是说，在绘制设计图时，按照750px宽度进行绘制，然后在小程序中使用 rpx 为单位，就无需担心不同手机之问宽度不同的问题了。