微信小程序适配：rpx

rpx （ responsive pixel）响应单位

• rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
• 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx
• 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

rpx 和 px之间的换算

• 在普通网页开发中，最常用的像素单位是px
• 在小程序开发中，推荐使用rpx这种响应式的像素单位进行开发
• 以 iPhone6 为例，iPhone6 的屏幕宽度为 375px，共有 750个物理像素，则 750rpx = 375px = 750 物理像素

得出公式：1 rpx = 0.5 px = 1 物理像素

举个例子：在iPhone6上，如果要绘制一个宽为100px，高为30px的盒子，换算成rpx单位，宽高分别为200rpx 和 60rpx

rpx 和 iPhone 设计稿的关系

官方建议：开发微信小程序时，设计师可以以iPhone6 作为视觉稿的标准，如果要根据iPhone6的设计稿，绘制小程序的页面，可以直接把单位 px 替换成 rpx 。例如：假设iPhone6设计稿上，要绘制一个宽高为 200px 的盒子，换算为 rpx为200rpx

以iPhone6为设计稿标准，单位 px 直接替换成 rpx的原因

设计师在出设计稿的时候，出的都是二倍图，也就是说如果在这个设计稿上有一个宽高为200px的盒子，那么它最终画到页面上实际上是一个宽高为100px的盒子，那么再换算成rpx需要乘以2，就又变成了200rpx，跟设计稿上的数字是一样的，所以我们可以保持数字不变，直接将单位 px 替换成 rpx

建议：设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算。