微信小程序分辨率的问题
为何模拟器上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不是所有的场合都适合。