移动端 UI 适配最佳实践(中)
2015-11-10 13:04
281 查看
上篇谈到了一些基础概念:屏幕密度、逻辑像素什么的,接下来继续探讨
更全的数据请参考Google 统计
说明:图中的 iPhone 6 Plus 数据看起来有些蹊跷,414 x 736 * 3 = 1242 x 2208,而物理像素却是 1080 x 1920 ,这是为何?实际上 iPhone 6 Plus 渲染出的图片尺寸为 1242 x 2208 px,但屏幕只有 1080 x 1920 px,所以系统会对渲染出的图进行压缩。
附:iOS对欢迎页的尺寸说明
从表中数据可以看出:
虽然物理像素各种各样,但是逻辑像素还是相对统一的。
逻辑像素相接近的,屏幕尺寸也比较接近。
实际上,逻辑像素就是为了使 UI 在不同的屏幕上的表现一致。即:相同单位的逻辑像素,在不同的屏幕上的物理尺寸相同。来张图吧,一图胜前言。
UI 元素的高度为200逻辑像素,在倍率为1的屏幕上,高度为200 px,在倍率为2的屏幕上,高度为400px;但他们的物理尺寸都是一样的。
说了这么多,该切入正题了!
为不同倍率的屏幕提供对应的图片资源
iOS 平台的 @2X , @3X
Android 平台的 drawable-mdpi , drawable-hdpi , drawable-xhdpi , drawable-xxhdpi 等等
Web 平台,JavaScript 根据倍率请求不同的图片
使用逻辑像素作为 UI 元素的长度单位
iOS : pt , Android : dp , Web : px
为不同尺寸的屏幕提供不同的布局
Android 平台支持根据尺寸来选用不同的布局,其他平台不太清楚。题外话:比如 适配平板和手机,国内大部分的应用都是一套布局,平板就是手机的放大版,可能大部分团队都疲于产品的迭代吧。Google 的应用在这块做的是标杆。
各个平台的一些细节肯定有些区别,但是原理如上所述。
下篇将讲一讲:如何让设计师和攻城狮更好的协同作业
常见设备尺寸
更全的数据请参考Google 统计
说明:图中的 iPhone 6 Plus 数据看起来有些蹊跷,414 x 736 * 3 = 1242 x 2208,而物理像素却是 1080 x 1920 ,这是为何?实际上 iPhone 6 Plus 渲染出的图片尺寸为 1242 x 2208 px,但屏幕只有 1080 x 1920 px,所以系统会对渲染出的图进行压缩。
附:iOS对欢迎页的尺寸说明
从表中数据可以看出:
虽然物理像素各种各样,但是逻辑像素还是相对统一的。
逻辑像素相接近的,屏幕尺寸也比较接近。
实际上,逻辑像素就是为了使 UI 在不同的屏幕上的表现一致。即:相同单位的逻辑像素,在不同的屏幕上的物理尺寸相同。来张图吧,一图胜前言。
UI 元素的高度为200逻辑像素,在倍率为1的屏幕上,高度为200 px,在倍率为2的屏幕上,高度为400px;但他们的物理尺寸都是一样的。
说了这么多,该切入正题了!
如何适配
前面做了很多铺垫,逻辑像素、倍率等等,是时候展现他们的用武之地咯为不同倍率的屏幕提供对应的图片资源
iOS 平台的 @2X , @3X
Android 平台的 drawable-mdpi , drawable-hdpi , drawable-xhdpi , drawable-xxhdpi 等等
Web 平台,JavaScript 根据倍率请求不同的图片
使用逻辑像素作为 UI 元素的长度单位
iOS : pt , Android : dp , Web : px
为不同尺寸的屏幕提供不同的布局
Android 平台支持根据尺寸来选用不同的布局,其他平台不太清楚。题外话:比如 适配平板和手机,国内大部分的应用都是一套布局,平板就是手机的放大版,可能大部分团队都疲于产品的迭代吧。Google 的应用在这块做的是标杆。
各个平台的一些细节肯定有些区别,但是原理如上所述。
下篇将讲一讲:如何让设计师和攻城狮更好的协同作业
相关文章推荐
- 移动端 UI 适配最佳实践(上)
- OC笔记 - iOS适配、block内存泄露、电话短信邮件等小功能(2015.3.27)
- android适配之dp,px深度解析
- Android 屏幕适配
- 从零学Android(四)、适配不同的Android设备
- Android各种分辨率
- Android适配全攻略
- Android 尺寸单位 屏幕适配
- android 屏幕适配
- Android 屏幕适配
- cocos2dx3.3+cocostudio1.6屏幕适配笔记
- iOS技巧——xcode的xib文件的6、7、3.5、4寸屏幕的四种适配
- iOS6,iOS7适配
- android – 多屏幕适配相关
- iOS项目适配
- "Android 屏幕适配"-Android面试必问"精华技能点"汇总
- px 与 dp, sp换算公式?
- 浅谈android 屏幕适配中 dp和sp的区别
- android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )及屏幕适配注意事项
- [Android分享] 彻底理解ldpi、mdpi、hdpi、xhdpi、xxhdpi