zhongxia245/blog

微信小程序~尺度单位

zhongxia245 opened this issue · 0 comments

时间: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