移动端尺寸基础知识.docx

初涉移动端设计和开发的同学们, 基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白, 感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是写给初学者的,所以不要嫌我啰嗦。现象首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是 Android , 你会听到很多种分辨率: 480x800, 480x854, 540x960, 720x1280, 1080x1920 , 而且还有传说中的 2K 屏。近年来 iPhone 的碎片化也加剧了: 640x960, 640x1136, 750x1334, 1242x2208 。不要被这些尺寸吓倒。实际上大部分的 app 和移动端网页,在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法,而且有规律可循。像素密度要知道,屏幕是由很多像素点组成的。之前提到那么多种分辨率,都是手机屏幕的实际像素尺寸。比如 480x800 的屏幕,就是由 800 行、 480 列的像素点组成的。每个点发出不同颜色的光, 构成我们所看到的画面。而手机屏幕的物理尺寸, 和像素尺寸是不成比例的。最典型的例子, iPhone 3gs 的屏幕像素是 320x480 , iPhone 4s 的屏幕像素是 640x960 。刚好两倍,然而两款手机都是 英寸的。所以,我们要引入最重要的一个概念:像素密度,也就是 PPI ( pixels per inch )。这项指标是连接数字世界与物理世界的桥梁。 Pixels per inch ,准确的说是每英寸的长度上排列的像素点数量。 1 英寸是一个固定长度,等于 厘米,大约是食指最末端那根指节的长度。像素密度越高,代表屏幕显示效果越精细。 Retina 屏比普通屏清晰很多,就是因为它的像素密度翻了一倍。倍率与逻辑像素再用 iPhone 3gs 和 4s 来举例。假设有个邮件列表界面, 我们不妨按照 PC 端网页设计的思维来想象。 3gs 上大概只能显示 4-5 行, 4s 就能显示 9-10 行, 而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示, 3gs 上刚刚好的效果,在 4s 上就会小到根本看不清字。在现实中, 这两者效果却是一样的。这是因为 Retina 屏幕把 2x2 个像素当 1 个像素使用。比如原本 44 像素高的顶部导航栏,在 Retina 屏上用了 88 个像素的高度来显示。导致界面元素都变成 2 倍大小,反而和 3gs 效果一样了。画质却更清晰。在以前, iOS 应用的资源图片中,同一张图通常有两个尺寸。你会看到文件名有的带***@2x 字样, 有的不带。其中不带***@2x 的用在普通屏上,带***@2x 的用在 Retina 屏上。只要图片准备好, iOS 会自己判断用哪张, Android 道理也一样。由此可以看出, 苹果以普通屏为基准,给 Retin a 屏定义了一个2 倍的倍率( iPhone 6plu s 除外, 它达到了 3倍)。实际像素除以倍率, 就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同,它们的显示效果就是相同的。 Android 的解决方法类似, 但更复杂一些。因为 Android 屏幕尺寸实在太多, 分辨率高低跨度非常大, 不像苹果只有那么几款固定设备、固定尺寸。所以 Android 把各种设备的像素密度划成了好几个范围区间, 给不同范围的设备定义了不同的倍率, 来保证显示效果相近。像素密度概念虽然重要,但用不着我们自己算, iOS 与 Android 都帮我们算好了。如图所示,像素密度在 120 左右的屏幕归为 ldpi , 160 左右的归为 mdpi ,以此类推。这样,所有的 Android 屏幕都找到了自己的位置,并赋予了相应的倍率: ? ldpi [ 倍]? mdpi [1倍]? hdpi [ 倍]? xhdpi [2倍]? xxhdpi [3倍]? xxxhdpi [4倍] 各型号 iPhone 的倍率比较简单, 我们后面会讲到。那么 Android 手机那么多, 具体怎么分?哪些手机是几倍的倍率呢?我们先看一张表,这是友盟 2014 年 10 月到 2015 年03 月的数据: 就目前市场状况而言, 各种手机的分辨率可以这样粗略判断。虽然不全面, 但至少在 1 年内都还有一定的参考意义: ? ldpi 如今已绝迹,不用考虑? mdpi [320x480] ( 市场份额不足 5% , 新手机不会有这种倍率, 屏幕通常都特别小) ? hdpi [480x800 、 480x854 、 540x960] (早年的低端机,屏幕在 英寸档位;如今的低端机,屏幕在 - 英寸档位) ? xhdpi [720x128