By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
移动端屏幕适配方法总结
2019-07-29 16:14:14    630    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 色彩体系

630 人读过
文档导航