在开发过程中，我们总是需要考虑如何适配各种的屏幕。但是你有没有想过，我们为什么需要适配屏幕呢？为什么需要那么多屏幕适配方案呢？
重新认识像素
你一定听说过像素，它是显示的基本单位。我们使用的px就表示像素。那这里有一个问题，如果我们用像素表示UI的大小，10px在任何屏幕都表示10个像素点，这样不就行了吗？为什么还要适配不同屏幕呢？
这是因为像素点没有物理大小，简单的说就是1cm屏幕可以有10像素，也可以有100像素。一般我们用 ppi 来表示每英寸有多少像素。
如下图，如果用像素来适配，相同大小的屏幕每单位长度的像素个数不同时，就会造成大小不同的问题。
image
那为什么像素不固定大小呢？因为不同的屏幕需求不同，比如手机和笔记本分辨率都有 1080 * 1920分辨率的，但是手机和笔记本的屏幕尺寸不同，如果需要让手机分辨率提高，就必须让手机屏幕的像素点比笔记本的小。
提到 PPI（pixels per inch），就不得不提 DPI（dots per inch）。从英文名看出，PPI是指每英寸像素；而 DPI是指每英寸墨点，它最早用于打印行业，后来引申到计算机，就是 PPI的概念。目前 PPI和 DPI是经常混用，可以认为它们是一个东西。具体可以看stackoverflow的这篇 What is the difference between ppi vs dpi?回答。
使用密度无关像素
上面我们提到，由于单位长度的像素点的个数不同，导致使用像素点适配屏幕是不可行的。这时候我们就会想，如果系统自动帮我们适配这个单位长度像素个数的差异不就行了吗？
在 Android中，Google提供了 dp（density- independent pixel，即密度无关像素，也叫dip）来实现这个功能; 在ios中，则是使用 pt（独立像素）。注意：这两者是一个意思，只是叫法不同。
假设我们绘制一个3dp * 3dp的正方形，在1PPI的屏幕中，该正方形的大小为 3px * 3px;而在2PPI的屏幕中，正方形的大小就变成了 6px * 6px。效果如下图，我们可以看到，使用dp后在不同的PPI的屏幕上表现是一致的。
image
上述的方案完美解决了PPI的问题，但是这样就可以适配所有屏幕了吗？答案当然是不行，因为设计稿的大小是固定的。一般设计给的设计稿都是360dp * 640dp的，但是实际上的屏幕尺寸可不止这些。像 Android One机型是
320dp * 569dp；而Google Pixel 机型则是 411dp * 731dp。
假设我们需要实现一个发送消息的UI（一个输入框和一个发送按钮），如果按照设计稿摆放UI，在与设计稿dp大小相同的机型上是正常的，但是在不同dp大小的机型上，表现就有问题了。如下图，如果屏幕dp大小小于设计稿（这里为 320dp * 569dp），则发送的按钮显示不完全；如果屏幕dp大小大于设计稿（这里为 411dp * 731dp），则会空出多余的空间。这也是为什么在Android的界面开发中，我们一般需要设置一个最大宽度和最小宽度的原因。
image
使用比例
上面说到，即使把UI控件适配成大小相同，在屏幕大小不同的情况下，也会出现UI控件显示不完全或者显示占比与设计稿不同的问题。
既然把UI控件适配成大小相同没有用，那么我们干脆按照UI控件占屏幕大小的比例来适配。有两种做法，一种是按照双边（长和宽）的比例来适配；一种是按照单边（长或者宽）的比例来适配。
双边适配
这里还是以上面的发送消息的UI为例。从图中，我们知道，输入框的长占比为 13/20，宽占比为 1/18；发送按钮长占比为 1/5，宽占比为 1/18.通过相同的比例换算，效果如下图所示：
image
按照比例的方案看上去解决了问题。但是这要在长宽比固定（这里是16:9）的情况下才有效。如果是在长宽比不同的屏幕上，如 16:9 的屏幕和 20:9 的屏幕上绘制正方形和圆形，则会出现拉伸的问题。效果如下图：
image
单边适配
既然双边适配不行，那就以占宽的比例来适配，UI的高则按照设计稿的比例乘以当前的UI的宽来获得。这样就既能保证UI控件的宽，同时UI控件的长宽比例不变。以高的比例来适配与宽的比例类似，下面就不赘述了。
image
如上图所示，使用单边适配时，在屏幕宽度不同的情况下，能按照当前屏幕宽度对UI控件进行缩放；在屏幕比例不同的情况下，能根据设计稿的比例来计算出当前屏幕下的UI控件的高度。
看上去适配单边是一个完美的方案。但是如果你想要显示全屏，这个方案就不行了。如下图所示，使用单边适配在不同屏幕上的效果。
image
仔细看的话，我们会发现上图那种情况如果是使用双边适配，那就是没有问题。从中我们可以发现，其实适配方案是需要根据自己的需求来选择的，这也是为什么有这么多适配方案的原因。
总结
前文详细介绍了以像素、密度无关像素、比例适配的不足，同时解释了为什么我们要考虑屏幕适配以及适配方案多种多样的原因。
需要注意的是上面只讨论了手机的屏幕，实际上现实中还有平板、笔记本、智能手表、电视等等。完善的屏幕适配远比我们想象的要复杂。工作中，我们不需要考虑那么多，只需要根据自己的需求来选择的合适的适配方案就行了。
网友评论