设计&开发

关于UI适配和单位之间的那点事

先给大家介绍一些单位的概念

1、英寸

英寸是长度单位，它是一个绝对值（同样是测量一英寸的物体，不会因为被测量物体的大小或密度而不同）。一般屏幕的大小都是英寸为单位的。（如图iPhone6的屏幕是4.7英寸）

·1英寸=2.54厘米

2、px（像素）

像素是大家最熟悉不过的一个东西了，它是设计中常用的单位，并且也是屏幕的组成部分。关于像素和设计中的关系就不说了，说下像素和屏幕的关系吧。

·屏幕是由一个个像素点组成的

·每个像素点有三个色相（R红、G绿、B蓝）

·每个色相有256色阶

每块屏幕都是由无数个像素点组成的。

3、ppi（屏幕密度）

ppi（屏幕密度）是根据一个公式计算出来的数字。它代表着屏幕的密度，但是它并不能代表屏幕的像素数量，计算公式是：√屏幕的宽²+屏幕的高²÷屏幕的大小（以iPhone6为例计算如下：√750²+1334²÷4.7≈326）。ppi越高屏幕越清晰细腻。

在同一英寸下如果ppi不同那么一英寸屏幕所包含的像素数量也不同。

英寸和ppi及px之间的关系如下：

例如每个框的大小为一英寸

注：该图仅表示他们之间的关系，并不代表某个ppi下一英寸的屏幕所包含的真是像素数量。

从上面三个矩形里可以看出ppi是401时矩形框里是平滑的看不到颗粒感，就像苹果的视网膜屏幕给人的感受一样。而ppi是163的就像我们小时候玩的手持游戏机一样，颗粒感非常明显。

在我们工作中设计的图标需要导出来给开发使用， 上面说过了屏幕的ppi是不同的，所以我们在导出一个图标的时候需要根据不同的ppi导出不同的大小。在iOS中图片是分三个倍率的分别是@1x、@2x、@3x。苹果公司发布的第一款手机3GS，它的ppi就是163，所有在iOS中便以这个ppi为基准倍率有了@1x（1倍图）这个概念。后来由于推出的手机屏幕ppi逐步增高，我们在切图给发的时候只有@1x的图就满足不了手机屏幕的需求了。于是就出现了@2x（2倍图）、@3x（三倍图）了。

4、pt（磅）

这个磅可不是我们ps里面的那个磅。pt（磅）是iOS开发中用到的单位，程序员在开发过程中是要把我们的标注转换成pt才能在程序中使用。

·pt不是一个绝对值（因为1pt在不同的ppi下等于的像素数量是不同的）

·pt所代表的大小范围和ppi有关

·pt和px之间换算如下

上图是苹果各个机型的ppi下用图的倍率。

由于现在3GS和iPhone4在市面上基本已经被淘汰了，所以我们实际工作中就不考虑适配这两款手机了，于是在切图出边不在导出@1x（1倍图）的图了。

5、dp（Android里的度量单位）、sp（Android里的字体单位）

·dp和sp不是一个绝对值（因为1dp\sp在不同的ppi下等于的像素数量是不同的）

·dp和sp代表的大小范围和ppi有关

·dp和sp与px之间换算如下

上图是Android部分机型的ppi下用图的倍率，因为Android的手机碎片化比较严重所以我只列出几款手机。

Android机型实在太多了，比较杂乱导因此导致Android手机的ppi也是多种多样,不过不用担心我们肯定不能每个机型都切一套图的不然要累死各位宝宝的。Android是划分了几个不同ppi，我们只需要根据这些ppi切出相应倍率的图片就好了。如上图所以Android一共划分了5中ppi，但是由于160ppi的手机基本已经绝种所以我们这个倍率的图就不切了，还有一个640ppi的我一般也不切这个倍率的，因为使用这个ppi的手机是在太少了。

感谢观看各位童鞋观看，希望可以帮助到各位！

有问题可以在评论区讨论