移动端界面设计之尺度基础知识学习（移动端界面尺寸大小）-建站经验-知优网

这篇文章主要为大家详细介绍了移动端界面设计之尺寸基础知识，通俗易懂的学习教程帮助大家了解关于移动端设计尺寸的相关知识，感兴趣的小伙伴们可以参考一下

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

现象

首先说现象，咱们都知道移动端设备屏幕尺度十分多，碎片化严峻。尤其是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英寸档位；现在的低端机，屏幕在4.7-5.0英寸档位）xhdpi [720x1280]（早年的中端机，屏幕在4.7-5.0英寸档位；现在的中低端机，屏幕在5.0-5.5英寸档位）xxhdpi [1080x1920]（早年的高端机，现在的中高端机，屏幕一般都在5.0英寸以上）xxxhdpi [1440x2560]（极少数2K屏手机，比方Google Nexus 6）

自然地，以1倍的mdpi作为基准。像素密度更高或许更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显现作用。

不过需求留心的是，Android设备的逻辑像素尺度并不一致。比方两种常见的屏幕480x800和1080x1920，它们别离归于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为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，这就意味着在xhdpi的设备上，按钮尺度至少是96x96px。而在xxhdpi设备上，则是144x144px。

不管画布设成多大，咱们规划的是基准倍率的界面款式，并且开发人员需求的单位都是逻辑像素。所以为了确保精确高效的交流，两边都需求以逻辑像素尺度来描绘和了解界面，不管是在标示图仍是在日常交流中。不要再说“底部标签栏的高度是96像素，我是依照xhdpi做的”这样的话了。

Web怎样办

移动端页面的肯定单位依然是px，至少代码里这么写，但它的道理也和app相同。由于像素密度是设备自身的固有特点，它会影响到设备中的一切运用，包含浏览器。前端技能能够善加利用设备的像素密度，只需一行代码，浏览器便会运用app的显现方法来烘托页面。依据像素密度，按相应倍率缩放。

能够经过这个测验页面 http://greenzorro.github.io/demo/basic/呼应式断点.html 来看看你的移动设备屏幕宽度，这是逻辑像素宽度。

以iPhone 5s为例，屏幕的分辩率是640x1136，倍率是2。浏览器会以为屏幕的分辩率是320x568，依然是基准倍率的尺度。所以在制造页面时，只需求依照基准倍率来就行了。不管什么样的屏幕，倍率是多少，都按逻辑像素尺度来规划和开发页面。只不过在预备资源图的时分，需求预备2倍巨细的图，经过代码把它缩成1倍巨细显现，才干确保明晰。

实践运用

咱们最关怀的仍是实践运用，画布该怎样设置。咱们就iOS、Android、Web三个渠道来别离整理一下。不过在这之前，我要为运用PS进行规划的朋友介绍一个小技巧。

之前我说过，咱们要以逻辑像素尺度来考虑界面。表现到规划过程中，便是要把单位设置成逻辑像素。翻开PS的首选项——单位与标尺界面，把尺度和文字单位都改成点（Point）。这儿的点也便是pt，不管规划iOS、Android仍是Web运用，单位都用它。当然，各渠道单位称号仍是要记住的。这儿咱们用的仅仅它的原理，不必介意称号。

要调理倍率，则经过图画巨细里的DPI来操控。这个DPI，其实便是PPI，像素密度。有个知识咱们都知道，屏幕上的规划DPI设成72，印刷品规划DPI设成300。为什么是这两个数字？

首先说300，这和人眼的分辩才干有关。由于1英寸是固定长度，每1英寸有多少个像素点决议了画质明晰程度。之前说过，这便是像素密度，也便是DPI。DPI到达300以上，其细腻程度就会给人真实感，像真实国际中的物件。相反，DPI只要10的话，在你一个食指指节巨细的长度内只要10个像素，这显着便是马赛克了。所以印刷品要设成300，才干确保明晰。

再说72，这有必定的前史原因。最早的图形规划是在mac电脑上进行的，mac自身的显现器分辩率便是72。PS中把图画DPI也设成72，就能确保屏幕上显现的尺度和打印尺度相同，便于规划。72的PC显现器分辩率逐步成为一种默许的行业标准，这套规矩就这么沿袭下来。