微信小程序~尺度单位

[zhongxia]

时间：2017-01-12 11:18:21

零、总结

1. 屏幕宽度为750rpx, 20rem, 375px。 1px = 2rpx
2. 设计师设计小程序图，建议使用750px的大小

一、支持的单位

rpx , rem , px

1px = 2rpx
1rem = ( 750/20 ) rpx

二、单位介绍

1. rpx

rpx单位是微信小程序中CSS的尺寸单位，rpx可以根据屏幕宽度进行自适应。 规定的屏幕宽度为 750rpx （其他就说 iphone6 的物理像素）
iphone6 屏幕宽度 375px , 750物理像素=750rpx

因此 1px = 2rpx

• 因此建议微信小程序设计师按照iphone6的屏幕来设计小程序，设计图宽度为750px, 这样开发的时候，直接用 设计图上量出来多少px ， 就是开发中，多少rpx ，不同设备的兼容呢， 微信小程序会自己去计算

2. rem

微信小程序规定屏幕的宽度为 20rem， 那么就换算成 rpx 和 px 的公式就出来了

1rem = 750/20 = 37.5rpx
1rem = ( 750/20/2 ) px