iphone6的750x1334分辨率排版开发APP及小程序的原因
小程序与APP都是移动设备上的开发,思路一致。而开发的时候,从设计图开始:750px是设计师一般采取的尺寸,然后再自己做适配。本文主要是根据小程序适配来写的:
pt是逻辑分辨率,pt的大小与屏幕尺寸有关系,简单可以理解为长度和视觉单位;px物理单位,像素点,不是长度的相关单位,与屏幕尺寸没有关系。 如下表格:
设备 | 屏幕尺寸 | 分辨率(pt) | Reader | 分辨率(px) | 渲染后 | PPI(DPI) |
---|---|---|---|---|---|---|
iPhone 3GS | 3.5寸 | 320x480 | @1x | 320x480 | 空 | 163 |
iPhone 4/4S | 3.5寸 | 320x480 | @2x | 640x960 | 空 | 326 |
iPhone 5/5S/5C | 4.0寸 | 320x568 | @2x | 640x1136 | 空 | 326 |
iPhone 6/6S | 4.7寸 | 375x667 | @2x | 750x1334 | 空 | 326 |
iPhone 6/6S Plus | 5.5寸 | 414x736 | @3x | 1242x2208 | 1080x1920 | 401 |
Reader :一个pt包含几个px;iPhone6下是 1pt = 2px 。
PPI表示每一寸包含多少个像素点,对角线勾股定理 ()/3.5寸。 而DPI打印机喷墨点数,这个PPI就是有DPI引申来的概念。
rpx小程序自适应。但是不是所有的地方的单位都适合用rpx。
如何做不同分辨率设备的自适应?
-
以ip6的物理像素750x1334为视觉稿进行设计,而在小程序中使用rpx为单位;
-
ip6下的换算单位是1px=1rpx=0.5pt
-
使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会。(但是也要根据实际的设计,比如横向的间距rpx最合适,竖向的间距可以考虑使用px来达到多页面相同的效果)。