当前位置:   article > 正文

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

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在任意设备上宽度都可以铺满屏幕。
在这里插入图片描述

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号