初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是写给初学者的,所以不要嫌我啰嗦。
现象
首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640x960, 640x1136, 750x1334, 1242x2208。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页,在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法,而且有规律可循。
像素密度
要知道,屏幕是由很多像素点组成的。之前提到那么多种分辨率,都是手机屏幕的实际像素尺寸。比如480x800的屏幕,就是由800行、480列的像素点组成的。每个点发出不同颜色的光,构成我们所看到的画面。而手机屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320x480,iPhone 4s的屏幕像素是640x960。刚好两倍,然而两款手机都是3.5英寸的。
所以,我们要引入最重要的一个概念:像素密度,也就是PPI(pixels per inch)。这项指标是连接数字世界与物理世界的桥梁。
Pixels per inch,准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度,等于2.54厘米,大约是食指最末端那根指节的长度。像素密度越高,代表屏幕显示效果越精细。Retina屏比普通屏清晰很多,就是因为它的像素密度翻了一倍。
倍率与逻辑像素
再用iPhone 3gs和4s来举例。假设有个邮件列表界面,我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行,4s就能显示9-10行,而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示,3gs上刚刚好的效果,在4s上就会小到根本看不清字。
在现实中,这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏,在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小,反而和3gs效果一样了。画质却更清晰。
1 2 3 下一页 查看全文免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 许佳琪.2024-4.Letters.Long(坠)【丝芭文化】【FLAC分轨】
- 前《地狱潜者2》首席编剧:最初它并不是实时服务游戏
- 《生化危机》官推庆祝母亲节:视频中母爱扑面而来
- 网友扒出《黑神话》本地化翻译人员 已支持12种语言
- 任家萱.2011-重作一个梦(EP)【华研】【WAV+CUE】
- 赵一豪.1996-直接爱恨【友善的狗】【WAV+CUE】
- 群星.2006-失而复得2辑【新艺宝】【WAV+CUE】
- 《张震岳6CD合集》1993-2000全套[WAV+CUE][3.1G]
- 周华健《粤语精选+国语精选》日本母带 [WAV+CUE][1.2G]
- 《陈楚生6CD合集》[WAV+CUE][2.2G]
- dnf经验胶囊快速获得
- dnf结婚地下城入场材料怎么获得
- dnf结婚戒指属性和婚房属性
- FlorianNoack-IWannaBeLikeYou(2024)【Hi-Res】24bit-96kHz【flac】
- 张国荣.1995-狂恋·国语经典【新艺宝】【WAV+CUE】