物理像素(Physical Pixels)
显示屏实际的物理像素数量,决定了物理分辨率的值。
渲染像素(Rendered Pixels,缩写px)
此像素数值是由系统OS所决定的,例如IOS系统就有两种渲染模式:标准模式和放大模式,两者其实改变是系统渲染的分辨率。
渲染像素与物理像素之间并没有联系。
移动设备的UI设计,所要依据的是设备的渲染像素,而不是物理像素。
逻辑像素(Points,缩写pt、dp)
pt是开发通常所使用的单位,概念类似于像素(px)。
1pt代表的是一个开发语言中的“1px”单位,只是最终与其对应的渲染像素,还存在一层换算关系(例如,处于iPhone 6的2倍屏时 1pt = 2px)。
倍率(1x,2x,3x)
物理像素与逻辑像素之间的转换关系被称为倍率,计算公式如下:
倍率 = 渲染像素 ÷ 逻辑像素
常见移动端设备倍率
IOS设备
机型 | iPhone 3.5″ 1/2/3GS [已淘汰] | iPhone 3.5″ 4/4S [已淘汰] | iPhone 4.0″ | iPhone4.7″ 放大 | iPhone 4.7″ 标准 | iPhone 5.5″ 放大 | iPhone 5.5″ 标准 | iPhone 5.8″ |
逻辑像素 | 320 x 480pt | 320 x 480pt | 320 x 568pt | 320 x 568pt | 375 x 667pt | 375 x 667pt | 414 x 736pt | 375 x 812pt |
渲染像素 | 320 x 480pt | 640 x 960px | 640 x 1136px | 640 x 1136px | 750 x 1334px | 1125 x 2001px | 1242 x 2208px | 1125 x 2436px |
倍率 | @1x | @2x | @2x | @2x | @2x | @3x | @3x | @3x |
换算 | 1pt = 1px | 1pt = 2px | 1pt = 2px | 1pt = 2px | 1pt = 2px | 1pt = 3px | 1pt = 3px | 1pt = 3px |
Android设备
分辨率缩写 | LDPI [已淘汰] | MDPI [已淘汰] | HDPI [已淘汰] | QHD | XHDPI | XXHDPI | XXXHDPI |
逻辑像素 | 320 x 426pt | 320 x 480pt | 320 x 534pt | 360 x 640pt | 360 x 640pt | 360 x 640pt | 360 x 640pt |
渲染像素 | 240 x 320pt | 320 x 480px | 480 x 800px | 540 x 960px | 720 x 1280px | 1080 x 1920px | 1440 x 2560px |
倍率 | @0.75x | @1x | @1.5x | @1.5x | @2x | @3x | @4x |
换算 | 4dp = 3px | 1dp = 1px | 2dp = 3px | 2dp = 2px | 1dp = 2px | 1dp = 3px | 1dp = 4px |
常见机型倍率为2倍和3倍,表现形式为@2x、@3x。
倍率最常见的应用就是在切图缓解,需要根据不同倍率提供对应尺寸的切图。
移动端分辨率的适配
设计基准分辨率
IOS端的适配关系,一直是基于1x、2x、3x的关系,常用逻辑像素为 375 x 667pt,主流分辨率 750 x 1334 (@2x) 、 1240 x 2208 (@3x)。
Android端现在分辨率碎片化的问题已经大有好转。事实上,Android手机分辨率在最近几年早已由手机产业链进行了整合,目前主流Android的逻辑像素只有一种,即360 x 640dp,常见的渲染像素是 720 x 1280 (@2x) 、 1080 x 1920 (@3x) 。目前整个液晶产业主要生产 1080 x 1920 像素的液晶面板,Android手机在裸机像素上已趋近统一。
适配方法
分辨率与平台已经没有必然的联系,如果将各个分辨率放到一起来看,其实 375 x 667pt 是一个比较合适的尺寸——这基本是目前移动设备常用分辨率中最低的分,由小至大的适配难度相比于由大至小要容易的多,而移动端的研发人员,在实际开发时也通常是基于pt(dp)来作为单位的。
为了方便屏幕适配以及开发对设计标注文档中图标等数值的换算,建议直接使用1倍(1x),也就是实际pt值(dp)直接作为UI设计画布的尺寸。
适配原则
移动端屏幕通常纵向内容会自动排列,因此逻辑像素的适配将主要以横向为基准。
根据内容形式及布局情况,适配可以分为以下三种原则:文字流、弹性控件、等比缩放。