微信小程序中rpx和px的区别?

大家用微信开发,肯定会接触到一个新的像素单位“rpx”。
那么“rpx”跟之前我们进行网页开发的“px”相比较有什么区别呢?
查看微信文档,
在这里插入图片描述
由上述定义可知,rpx是“动态像素”,一个rpx宽度并不是固定的,可以根据屏幕宽度进行自适应。

这里说的规定屏幕宽为750rpx,意思是说“微信小程序”中默认所有设备屏幕的宽度就为750rpx。
意思是说,如果我想要我的元素占据屏幕的2/3,那么我只要设定他的width=500rpx即可。
以下举个例子,设定两个view,蓝色的view的width=375px,绿色的view的width=750rpx(蓝色和绿色view的单位不同),在iphone6模拟器上他们正好都可以将设备屏幕铺满。
在这里插入图片描述
但是这时候我把设备模拟器换成“iphone 6plus”后,蓝色的view就不能铺满屏幕了,因为iphone6 plus的屏幕实际宽度为414px;
绿色的view依然能够铺满屏幕。
这就佐证了,rpx的宽度不是固定的,会随着屏幕自动变化,并且750rpx被设定为屏幕的宽度,width=750rpx在任意设备上宽度都可以铺满屏幕。
在这里插入图片描述

  • 11
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值