移动端尺寸基础知识

　　从原理出发，介绍移动终端设计尺寸规范

　　刚开始参与移动终端设计和开发的学生，基本上会在尺寸问题上挣扎一段时间来触摸线索。我也花了很长时间才明白，我觉得有必要写一个足够容易理解的教程来帮助你。从原则开始，澄清尺寸的所有细节。因为它是写给初学者的，所以不要认为我很罗嗦。现象

　　首先，我们都知道移动设备有很多屏幕尺寸和严重的碎片化。特别是安卓，你会听到很多分辨率：480x800， 480x854, 540x960, 720x1280, 1080x1920，还有传说中的2K屏。近几年iPhone的碎片化也加剧了：640x960， 640x1136, 750x1334, 1242x2208。

　　不要被这些尺寸吓倒。事实上，大多数应用程序和移动网页都可以在各种尺寸的屏幕上正常显示。解释尺寸的问题必须有解决方案和规则。 像素密度

　　你知道，屏幕是由许多像素点组成的。前面提到的各种分辨率都是手机屏幕的实际像素尺寸。例如，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像素作为一个像素。例如，在Retina屏幕上显示了88个像素的高度，原来的44像素高度的顶部导航栏。因此，界面元素的大小是3gs效果的两倍。图像质量更清晰。

　　在过去，IOS应用程序的资源图片中，同一张图片通常有两个尺寸。你会看到文件名称中有些带有@2x字样，有些没有。其中，普通屏幕上没有@2x，Retina屏幕上使用@2x。只要图片准备好，IOS就会判断使用哪一个，Android也是如此。

　　由此可见，苹果以普通屏幕为基准，将Retina屏幕的倍率定义为两倍(iPhone 除了6plus，它已经达到了3倍)。除以倍率，实际像素得到逻辑像素的大小。只要两个屏幕的逻辑像素相同，它们的显示效果就相同。

　　Android的解决方案相似，但更复杂。因为Android的屏幕尺寸太大，分辨率跨度很大，不像苹果只有几个固定设备和尺寸。因此，Android将各种设备的像素密度划分为几个范围，并为不同范围的设备定义不同的倍率，以确保相似的显示效果。虽然像素密度的概念很重要，但我们不需要自己计算，iOS和Android都帮助我们计算。

　　如图所示，像素密度约为120的屏幕被归类为ldpi，160的屏幕被归类为mdpi，以此类推。这样，所有的安卓屏幕都找到了自己的位置，并给出了相应的倍数：

　　ldpi [0.75倍]

　　mdpi [1倍]

　　hdpi [1.5倍]

　　xhdpi [2倍]

　　xxhdpi [3倍]

　　xxxhdpi [4倍]

　　各种类型的iPhone的倍率相对简单，我们稍后将讨论。那么，有这么多安卓手机，如何划分它们呢?哪些手机的倍数是多少倍?让我们先看一张手表，这是友盟2014年10月至2015年3月的数据：

　　就目前的市场情况而言，可以粗略判断各种手机的分辨率。虽然不全面，但至少一年内还是有一定参考意义的:

　　ldpi 现在已经消失了，不用考虑

　　mdpi [320x480](市场份额不足5%，新手机不会有这样的倍率，屏幕通常特别小)

　　hdpi [480x800、480x854、540x960](早期低端机，屏幕在3.5英寸档位;今天的低端机，屏幕在4.7-5.0英寸档位)

　　xhdpi [720x1280](早期中端机，屏幕在4.7-5.0英寸档位;今天的中低端机，屏幕在5.0-5.5英寸档位)

　　xxhdpi [1080x1920](早期的高端机，今天的中高端机，屏幕通常在5.0英寸以上)

　　xxxhdpi [1440x2560](Google等极少数2K屏手机 Nexus 6)

　　自然，以1倍mdpi为基准。对于像素密度较高或较低的设备，只需乘以相应的倍率，即可获得与基准倍率相似的显示效果。

　　但需要注意的是，Android设备的逻辑像素尺寸并不统一。例如，两个常见的屏幕是480x800和1080x1920，它们分别属于hdpi和xxhdpi。逻辑像素为320x533和360x640。显然，后者更宽、更高，可以显示更多的内容。因此，即使存在倍数，各种Android设备的显示效果仍然不能完全一致。 单位

　　不难发现，真正决定显示效果的是逻辑像素的大小。因此，iOS和Android平台都定义了自己的逻辑像素单元。iOS的尺寸单元是pt，Android的尺寸单元是dp。说实话，两者实际上是一回事。

　　单位之间的转换关系随倍率而变化：

　　1倍:1pt=1dp=1px(mdpi、iPhone 3gs)

　　1.5倍：1pt=1dp=1.5px(hdpi)

　　2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

　　3倍：1pt=1dp=3px(xxhdpi、iPhone 6)

　　4倍:1pt=1dp=4px(xxxhdpi)

　　单位决定了我们的思维方式。在设计和开发过程中，应尽量使用逻辑像素尺寸来思考界面。在设计Android应用程序时，一些设计师喜欢将画布设置为1080x1920，另一些设计师喜欢设置为720x1280。给定的界面元素尺寸不统一。Android的最小点击区域尺寸为48x48dp，这意味着按钮尺寸至少为96x96px。在xxhdpi设备上，它是144x144px。

　　无论画布有多大，我们都设计了基准倍率的界面风格，开发人员需要的单位都是逻辑像素。因此，为了确保准确高效的沟通，无论是在标记图还是日常沟通中，双方都需要用逻辑像素的大小来描述和理解界面。不要说“底部标签栏的高度是96像素，我是按xhdpi做的”。 Web怎么办?

　　移动页面的绝对单位仍然是px，至少在代码中，但它与应用程序相同。因为像素密度是设备本身的固有属性，它会影响设备中的所有应用程序，包括浏览器。前端技术可以充分利用设备的像素密度，浏览器使用应用程序的显示来渲染页面。根据像素密度，按相应的倍率缩放。

　　httpp可以通过这个测试页面://greenzorro.github.io/demo/basic/响应断点.看看你的移动设备屏幕宽度，这就是逻辑像素宽度。

　　iPhone 以5s为例，屏幕的分辨率为640x1136，倍率为2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的大小。因此，在制作页面时，您只需要根据基准倍率进行设计和开发页面。无论什么样的屏幕和倍率是多少，页面都是根据逻辑像素大小设计和开发的。但是，在准备资源图时，需要准备两倍大小的图，并通过代码将其缩小到一倍大小，以确保清晰度。 实际应用

　　我们最关心的是实际使用，如何设置画布。让我们谈谈iOS、Android、Web三个平台分别梳理。不过在此之前，我想给用PS设计的朋友介绍一个小技巧。

　　正如我之前所说，我们应该考虑到逻辑像素的大小。反映在设计过程中，是将单位设置为逻辑像素。打开PS的首选——单位和标尺界面，将尺寸和文本单位改为点(Point)。无论iOS设计如何，这里的点都是pt、Android或Web应用程序，所有单位都使用它。当然，每个平台的名称仍然需要记住。我们在这里使用的只是它的原理，不在乎它的名字。

　　为了调整倍率，通过图像大小中的DPI进行控制。这个DPI实际上是PPI和像素密度。众所周知，屏幕上的DPI设计为72，印刷品设计为300。为什么是这两个数字?

　　首先，300与人眼的辨别能力有关。因为1英寸是固定长度，每1英寸有多少像素决定了图像质量的清晰度。正如我之前所说，这是像素密度，也就是DPI。当DPI超过300时，它的细腻会给人一种现实感，就像现实世界中的物体一样。相反，如果DPI只有10，那么你的食指指节长度只有10像素，这显然是马赛克。因此，为了确保清晰度，应将印刷品设置为300。

　　再说72，有一定的历史原因。最早的图形设计是在mac计算机上进行的，mac本身的显示分辨率是72。在PS中，图像DPI也设置为72，以确保屏幕上显示的尺寸与打印尺寸相同，便于设计。72的PC显示分辨率逐渐成为默认的行业标准，因此遵循了这一规则。

　　现在回到正题，如何通过DPI调整倍率?既然屏幕本身的分辨率是72，DPI设置72只是尺寸的一倍，那么设置72的两倍就是2倍的屏幕，就这么简单。

　　我们来看看三个平台各自的画布设置: iPhone

　　iPhone的屏幕尺寸不同，我说逻辑像素的大小确实令人头疼。如果你想使用一套涵盖所有iPhone的设计，你应该选择逻辑像素折叠的模型。

　　从市场份额数据来看，目前iPhone5/5s的屏幕最多。倍率为2，逻辑像素320x568。iPhone是未来最激烈的上升势头。 6屏幕。倍率为2，逻辑像素375x67。

　　根据这两种尺寸进行设计，都是比较主流的做法。可以考虑较短的iPhone 4s，大一点的6 plus也不会太空旷。

　　但是在切割图片的时候要注意，因为iPhone 6 plus的三倍图是由两倍图放大的，所以位图要注意保证清晰。 Android

　　据说Android严重碎片化，但现在比iOS更容易处理。因为今天的Android屏幕逻辑像素趋于统一：360x640取决于你设置了多少次。如果您想以xhdpi为准，请将DPI设置为72x2=144。如果您想以xxhdpi为准，请将DPI设置为72x3=216。

　　对于那些宽度为480px的老低端机器，图片会更小，显示的内容也会更少。稍微注意一下，重要内容尽量保持在界面的上部。

　　当然，这些型号将在不到一年的时间内被边缘化，并基本上被淘汰。现在可以运行的也被用作功能机器。毫无疑问，如果有更多的软件，就会出现卡片，用户体验也无从谈起。不考虑也没关系。 Web

　　手机网页没有统一的标准，更流行的做法是按照iPhone 设计尺寸5。倍率2，逻辑像素320x568。

　　这种做法更真实。倍率2的屏幕是iOS和安卓的主流，是两倍屏幕中最小的逻辑像素。因此，图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点是在倍率3的设备上，图片不是特别清晰。

　　如果追求图片质量，愿意牺牲加载速度，可以根据最大屏幕进行设计。即iPhone 6 plus尺寸，倍率3，逻辑像素414x736。 总结

　　移动终端的尺寸比PC终端更复杂，关键是倍数。但由于倍数的存在，将大大小小的屏幕拉回到相同的水平线，以确保一套设计能够适应各种屏幕。从这条水平线的角度来看，它很容易理解。