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就交给小程序自己换算。