微信小程序——WXSS模板样式【rpx】

什么是rpx尺寸单位

rpx  （responsive pixel）是微信小程序独有的，用来解决屏幕适配的尺寸单位。

rpx的实现原理

鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）

• 在较小的设备上，1rpx所代表的宽度较小；
• 在较大的设备上，1rpx所代表的宽度较大；

小程序在不同设备运行的时候，会自动讲rps的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

rpx与px之间的单位换算

在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则：

750rpx = 375px = 750物理像素

1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。