建站技术

初涉移动端规划和开发的同学们，根本都会在尺度疑问上纠结好一阵子才干摸到头绪。我也花了很长时刻才弄理解，感受有必要写一篇满意通俗易懂的教程来协助咱们。从原理说起，理清对于尺度的一切细节。由所以写给初学者的，所以不要嫌我烦琐。

表象

首要说表象，咱们都知道移动端设备屏幕尺度十分多，碎片化严峻。尤其是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作用相同了。画质却更明晰。