不经作者同意，禁止转载
前言
登录界面非常常见，这篇文章就来讲讲如何在各种机型中做到完美适配。（写文章时，正值2016法国欧洲杯，所以项目中加入了欧洲杯的元素。）
效果图
很多时候在工作中，UI的同事现在都只会以一种机型做效果图，比如以iPhone6s的屏幕尺寸为标准。效果图：
本文中Storybord的size也是以iPhone6s的大小为基准。
代码说明
效果图很简单，包括了背景图，欧洲杯Logo，账户密码文本输入框和登录注册按钮等。除了背景图，我将效果图上的元素分成了两部分：Logo和ContentView，如下图：
Logo和ContentView的约束见下图（ContentView中控件的约束不做过多陈述，对最后的适配不产生影响）：
从图中看到Logo有一个到Superview顶部的约束90，再加上水平居中的约束从而确定了Logo的位置。ContentView有一个到Superview顶部的约束330，再加上Leading和Trailing约束也就确定了ContentView的位置，至此在iPhone6s上很好的实现了效果图的效果。
现在问题来了，在iPhone6s上实现了适配，在其他机型上的效果如何呢？在其他机型的模拟器上运行下，如下图：
除了在iPhone4s上惨不忍睹之外，其他机型的效果还说的过去。所以有人认为只要在iPhone4s上做下特别处理就OK了，但我认为这并没有做到很好的适配。
适配
首先要特别注意下上面提到的两个值90和330，这两个值确定了Logo和ContentViewde在iPhone6s屏幕上的坐标Y值，但是不同的屏幕大小这两个值应该是有不同的值，不能设置固定值，只能以比例计算。两个比例值为 90 / 667 = 0.135 和 330 / 667 = 0.495，如何使用这两个比例值是本文中最重要的部分。双击打开Logo的Top space to这个约束，如下图：
图中红框处有一个计算式，Logo.top = top + 90，完整的算式应该是
Logo.top = Multiplier * top + Constant
Multiplier在图中值为1，top值为0，Constant值为90。既然top == 0，那么其实Multiplier值为多少已经没有意义了，那如何做适配呢？
我们可以反过来想，刚才的约束是到SuperView顶部的距离，那我也可以设置到SuperView底部的距离，那么计算式应该变成
Logo.top = Multiplier × bottom + Constant
bottom值为屏幕的高度，因为我的工程是以iPhone6s屏幕大小做标准的，所以在这里bottom == 667。将刚才算出的比例代入得出：Logo.top = 0.135 × bottom + 0，Constant值应该设为0，所以新的约束是：
同理，也可以将ContentView的约束更新成下图：
至此，适配做完了，看下在各个机型模拟器上的效果：
总结
多数情况下以上的内容是适用的，但是会受到很多因素的影响，比如Logo的高度过高等都会影响到最后的效果。
如有错误，请指正。
