微信小程序单位rpx解析
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序单位rpx解析相关的知识,希望对你有一定的参考价值。
参考技术A首先要分清两种分辨率:
视觉上的清晰度 :
单位逻辑分辨率上的物理像素点越多,视觉效果越清楚。
但是人类的眼球是有视觉极限的。也就是326ppi;
通常来说一个pt可以由1个px或者2个px甚至3个px构成
结论:工作时如果按照iphone6来设计的,将设计稿的1px=1rpx=0.5pt。由于rpx会随着屏幕的尺寸调整,所以建议文字类的不建议用rpx,会导致页面字体过小
微信小程序 单位rpx与px之间的转换
1、rpx: 微信小程序中的尺寸单位rpx(responsive pixel)
可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx.
注:微信官方建议视觉稿以iphone6为标准。
2、个人示例测试:
假设我们需要一个宽为200px,高为200px这样的A元素模块;我们分别在iphone5和iphone6上测试px与rpx之间的转换。
iphone5:
在iphone5上1px等于2.34rpx,那么200*2.34=468rpx;如下图所示:
iphone6:
iphone6上1px=2rpx;那么我们将A元素的模块转换成rpx为200*2=400rpx;
从上图可以看出,不管是iphone5或是iphone6,转换之后A元素的宽高与没转换之前是相等 的。
以上是关于微信小程序单位rpx解析的主要内容,如果未能解决你的问题,请参考以下文章