初尝微信小程序3-移动设备的分辨率与rpx

Posted 2020-12-02 lvmingchen

屏幕尺寸就是实际的物理尺寸。

分辨率（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自适应，那可能在小机型上，字会很小看不清。