移动端 UI 适配最佳实践（中）
为什么80%的码农都做不了架构师？>>> 
上篇谈到了一些基础概念：屏幕密度、逻辑像素什么的，接下来继续探讨
常见设备尺寸
更全的数据请参考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 的应用在这块做的是标杆。
各个平台的一些细节肯定有些区别，但是原理如上所述。
下篇将讲一讲：如何让设计师和攻城狮更好的协同作业
转载于:https://my.oschina.net/yinjq/blog/528452
移动端 UI 适配最佳实践（中）相关推荐
- 移动端web开发最佳实践
主流的移动终端和移动浏览器 智能移动中断主要以智能手机和平板电脑为主,智能系统则是IOS和Android两大系统. 由于IOS和Android系统成为主流系统,因此系统自带的浏览器就成了主流的浏览器. ...
- IM场景的移动端UI自动化测试平台实践
在公司做了两三年IM平台开发,基本上把IM的所有能力都搭建齐全了:单聊.群聊.文本消息.语音消息.视频消息.卡片消息.音视频通话等,而且把整个聊天页面各个区域都开放了出去.整个IM系统的框架以及开发流 ...
- Android端WEEX + HTTPDNS 最佳实践
由于WebView并未暴露处设置DNS的接口,因而在WebView场景下使用HttpDns存在很多无法限制,但如果接入WEEX,则可以较好地植入HTTPDNS,本文主要介绍在WEEX场景下接入HTTP ...
- 彼之蜜糖，吾之砒霜——聊聊软件开发中的最佳实践
作者:sherrywasp https://www.cnblogs.com/sherrywasp/p/9436623.html "描述一个事物,唯有一个名词定义它的概念,唯有一个动词揭露它的 ...
- 为什么java需要静态类_java – 为什么OOP中静态类的最佳实践有所不同？
我目前正在阅读有关 Java最佳实践的内容,我发现根据 this book,我们必须支持非静态的静态类.我记得在C#最佳实践中,我们必须根据Dennis Doomen的C#3.0,4.0和5.0编码指 ...
- 汝之蜜糖，吾之砒霜— 聊聊软件开发中的最佳实践
文章来源:https://www.cnblogs.com/sherrywasp/p/9436623.html 作者:sherrywasp "描述一个事物,唯有一个名词定义它的概念,唯有一个动 ...
- 《AngularJS深度剖析与最佳实践》一1.6 实现AOP功能
本节书摘来自华章出版社<AngularJS深度剖析与最佳实践>一书中的第1章,第1.6节,作者 雪狼 破狼 彭洪伟,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...
- K8S 最佳实践-映射外部服务 Endpoints / ExternalName
大多数 Kubernetes 用户都有可能用到集群外部的服务.例如,您可能使用 Twillio API 发送短信,或使用 Google Cloud Vision API 进行图像分析. 如果位于不同环 ...
- 收藏 | Google 发布关于机器学习工程的最佳实践
来源:TensorFlow 本文约17800字,建议阅读10+分钟. 本文档旨在帮助已掌握机器学习基础知识的人员从 Google 机器学习的最佳实践中受益. 本文档旨在帮助已掌握机器学习基础知识的人员 ...
最新文章
- 可运行的c语言程序的扩展名为什么？
- 分别对时分秒加减的java_Java中关于获取时间(日期)的总结大全
- PyQt学习笔记（二）将PyQt项目转化为WIN下的可执行程序
- GCC全过程详解+剖析生成的.o文件[转]
- parfor —— matlab 下的并行循环
- void类型指针 指针的各种组合
- IDEA 2020.3 更新了，机器学习都整上了
- NYOJ题目289/456/49-01背包问题汇总
- java多线程常用面试_Java多线程常用面试题(含答案,精心总结整理)
- 查看npy文件中存的是什么
- 优秀LOGO设计的规则
- HDS G200 更换CFM
- ResultSet.next() 速度慢 怎么办
- html页面宽度和高度,页面布局宽度和高度 网页设计合适的页面尺寸是多少
- 网页小图标和文字混排时如何对齐基准线
- 不忘初心，方的始终，初心易得，始终难守，致2019
- [二维DP] 洛谷P1736 创意吃鱼法（预处理）
- 回归分析——基本内容
- php+安装+curl_linux php安装curl扩展的方法
- 匹配中文汉字日文韩文等多国语言的正则表达式（转）