关于rpx的理解
站长
· 阅读数 9
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