移动端尺寸基础知识（副本）.pdfVIP

移动端尺寸基础知识 初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必 要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是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 效果一样了。画质却更清晰。 在以前，iOS 应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x 字样，有的不带。其中不带@2x 的 用在普通屏上，带@2x 的用在Retina 屏上。只要图片准备好，iOS 会自己判断用哪张，Android 道理也一样。 由此可以看出，苹果以普通屏为基准，给Retina 屏定义了一个2 倍的倍率（iPhone 6plus 除外，它达到了3 倍）。实际像素 除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。 Android 的解决方法类似，但更复杂一些。因为Android 屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、 固定尺寸。所以Android 把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像 素密度概念虽然重要，但用不着我们自己算，iOS 与Android 都帮我们算好了。 如图所示，像素密度在120 左右的屏幕归为ldpi，160 左右的归为mdpi，以此类推。这样，所有的Android 屏幕都找到了自 己的位置，并赋予了相应的倍率：  ldpi [0.75 倍]  mdpi [1 倍]  hdpi [1.5 倍]  xhdpi [2 倍]  xxhdpi [3 倍]  xxxhdpi [4 倍] 各型号iPhone 的倍率比较简单，我们后面会讲到。那么Android 手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们 先看一张表，这是友盟2014 年10 月到2015 年03 月的数据： 就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在 1 年内都还有一定的参考意义：  ldpi 如今已绝迹，不用考虑  mdpi [320x480] （市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小）  hdpi [480x800 、480x854 、540x960] （早年的低端机，屏幕在3.5 英寸档位；如今的低端机