移动端屏幕适配方法总结
2019-07-29 16:14:14    166    0    0
emengweb

物理像素(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 480pt320 x 480pt
320 x 568pt320 x 568pt375 x 667pt375 x 667pt414 x 736pt375 x 812pt
渲染像素320 x 480pt640 x 960px640 x 1136px640 x 1136px750 x 1334px1125 x 2001px1242 x 2208px1125 x 2436px
倍率@1x@2x@2x@2x@2x@3x@3x@3x
换算1pt = 1px1pt = 2px1pt = 2px1pt = 2px1pt = 2px1pt = 3px1pt = 3px1pt = 3px

Android设备

分辨率缩写

LDPI

[已淘汰]

MDPI

[已淘汰]

HDPI

[已淘汰]

QHD

XHDPI

XXHDPI

XXXHDPI

逻辑像素320 x 426pt320 x 480pt
320 x 534pt360 x 640pt360 x 640pt360 x 640pt360 x 640pt
渲染像素240 x 320pt320 x 480px480 x 800px540 x 960px720 x 1280px1080 x 1920px1440 x 2560px
倍率@0.75x@1x@1.5x@1.5x@2x@3x@4x
换算4dp = 3px1dp = 1px2dp = 3px2dp = 2px1dp = 2px1dp = 3px1dp = 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设计画布的尺寸。

适配原则

移动端屏幕通常纵向内容会自动排列,因此逻辑像素的适配将主要以横向为基准。

根据内容形式及布局情况,适配可以分为以下三种原则:文字流、弹性控件、等比缩放。

 

 

上一篇: 在Debian上安装Aria2

下一篇: 用 HSB 搭建 UI 色彩体系

166 人读过
comments powered by Disqus
文档导航