P25_wxss - rpx单位

模板样式 - rpx

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

2. rpx 的实现原理

   • rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。
     • 在较小的设备上，1rpx 所代表的宽度较小
     • 在较大的设备上，1rpx 所代表的宽度较大
   • 小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

3. rpx 与 px 之间的单位换算*
   
   在 iPhone6 上，屏幕宽度为375px，共有 750 个物理像素，等分为 750rpx。则：

   • 750rpx = 375px = 750 物理像素
   • 1rpx = 0.5px = 1物理像素

   
   
   官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。
   
   开发举例：在 iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。