初尝微信小程序3-移动设备的分辨率与rpx
屏幕尺寸就是实际的物理尺寸。
分辨率(pt),是逻辑分辨率,pt的大小只和屏幕尺寸有关,简单可以理解为长度和视觉单位。
分辨率(px),是物理分辨率,单位是像素点,和屏幕尺寸没有关系。
微信开发者工具上iphone6尺寸是375,指的是逻辑分辨率,设计图常常给出的750px是物理分辨率。1个pt可以有1个px构成,也可以是2个,还可以有3个甚至更多(其实@2x已经是人眼的极限了,再增加也不会改变清晰度)。如果是以iphone6的尺寸开发的话,那么设计图给的物理像素除以2,才是写在代码里的逻辑分辨率。这样很麻烦,针对不同的机型,添加图片需要更改各自的宽高。
所以需要做到不同分辨率设备的自适应。
以iphone6的物理像素750X1334为视觉稿进行设计,而在小程序中使用rpx为单位,1px=1rpx=0.5pt。使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会。
rpx在微信小程序中,相当于一个标准,在不同的分辨率机型下,代表不同的实际长度。
所以今后在设计页面布局图的时候,尽量以iphone6,750px屏幕尺寸为标准设计,这样比较方便,不会有太大问题。(如果以iPhone6 plus为标准设计的话,1px = 0.6rpx,换算很麻烦,而iPhone6 1px=1rpx,很方便,1:1)。
PS:不是所有的单位都适合用rpx。
比如一些文字,如果用rpx自适应,那可能在小机型上,字会很小看不清。
更多专业前端知识,请上【猿2048】www.mk2048.com