微信小程序分辨率的问题

为何模拟器上iPhone6的分辨率是375而设计图给的是750?

首先要理解pt和px的区别。pt是逻辑分辨率,只和屏幕物理尺寸相关。如iPhone 3GS和iPhone4/4s  都是3.5寸,所以分辨率都为320X480。

px是物理分辨率,和屏幕尺寸无关。点无大小可言。

pt和px可以理解为一个pt内能包含多少个px。iPhone 3GS和iPhone4/4s相比,逻辑分辨率相同,物理分辨率后者是前者的两倍(Reader为@2x),图像显示就更加细腻。

但是 iPhone6/6s Plus的图像并没有更清晰,这是因为2倍的像素个数已经到达人眼分辨的极限,再增加物理像素点并没有什么意义。

 ppi= 屏幕对角线上的像素点数/对角线长度 = √ (屏幕横向像素点^2 + 屏幕纵向像素点^2)/对角线长度  

由于微信小程序给出的分辨率375是逻辑分辨率,而设计图的750是按照物理分辨率。

 一个pt可以有1个px构成,也可以有2个,还可以有3个甚至更多。

iPhone6下1个pt由2个px构成。

如何做不同分辨率设备的自适应?

以iPhone6的物理像素750X1334位视觉稿进行设计,而在小程序中使用rpx为单位

iPhone6下 1px = 1rpx = 0.5pt

使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会转换。

但rpx不是所有的场合都适合。

 

posted @ 2017-05-31 15:05  慕容文刀  阅读(8421)  评论(0编辑  收藏  举报