橙子的橙子：得刚做 UI ，根不道做完界面还需要适，就以为把设计图做就行，其他的情跟自己没有半点关系。慢慢的踩坑之，才道还有适一说。所以说有情别人不告诉你，自己是很难意识到的，光靠踩坑得出经验，终究成太大。何不站在前人的肩膀上进步呢。
一、当前现状
UI 行业的火爆，各行各业的人涌进来，很之前没有设计基础的转行做 UI设计师，其中不乏只突击学习几个月的新手，在培的时为能让学切切的看到际效果，大在练习画图标、做界面，而对际工中才用到的基不讲，倒不是说培班讲的不，也没有贬低培班的意思，我自己也参加。他们不讲只不是因为识晦涩难懂，教新手也很难理，索不讲。
这就让很多新入行的设师认 UI 很简单，只需把产品的原型填色，把填色后的设稿输出就觉得万事吉了。对于配知之甚少，甚至些觉得自己半点关系，都发的事。
二、错误做法
由于部分设师对配了解不够透彻，以至于实际项目的时候，需把750的设稿配到640、720、1242的屏幕时，都选择把设稿直接比拉伸至对应的尺寸，然后再重新标注，殊不知此方法不仅增加了几倍作，还会导致终的效果不如人意，花了功夫还不出效果，的就这种事了。
下面以 QQ 首页为例，左图是750的计稿（临摹的）直拉伸至1242的，右图是实际线上1242的界面。
相大家也出差别了，750直拉伸后的界面素整体都比实际线上1242的大。
之所以说这的方法是错的，有个因，一个是按照此方法，750和1242所显示的内容是一多的，但实际上1242的屏幕要比750的长一些，显示的内容更多一些才对，如下图金融。
另一个因就跟数学有关了，750的页面要1242的大，需要放大1.65倍，但实际上750是2x倍率下的界面，1242是3x倍率下的界面，的比例是1:1.5，而不是1:1.65。
也就是说由750直拉升1242的稿开发实现的候会出现这的情况，icon 是1.5倍的大（ icon 实现的候用的是3x切图文件）文字大、间距、图片却是1.65倍的大，标注稿也是按照1.65倍的来标注的，这就会响开发布局，导致出现一系列误差。
由图可见，当直在拉伸的计稿中标注间距、icon大，在实际开发的候 icon 的尺寸会比标注的要，相差15px，这个候如果开发完全按照标注稿来布局，这就会导致有 icon 的域间距显和其地方不一，相差大，甚至会出现 icon变形的情况。
那既然直拉伸计稿的方法不可行，难道只能为每个屏幕尺寸都重新做一套计？当然不是，这的开发成本大，而且也没有必要，其实只要计的候多注适配的问题，就能做一稿适配所有。
三、为什么不能一稿适配所有
大多数人对于750适配1242都表示能理解，但对于750720就理解不了，持反对见，觉得这个属于 iOS 和 Android 个不同的端，标签栏和导航栏高度都不一，不独输出计稿的话，图标图片会变形、间距会窄……
那面来解释一往大的路子都是正面说一稿为么适配有，今天我们走个一样的路子，一稿为么适配有呢？面针对大存在疑惑的几个点来做详细解释。
1. 图标变形
开发在做的时候都是的2x、3x的切图，每个屏幕尺寸哪套图是根据倍率来择的，同一个倍率的图标大小、间距、字号都是一样的。
2. 图片变形
图片都是按照比例来的，只要标注的候只标注比例，而不是把宽高都限制死，这个问题是可以避免的。
3. iOS 和 Android 平台差异
一些人总认两平台存差异性，比如它们的导航栏、标签栏、时间栏不一样，怎么能配呢？其实部的导航栏、时间栏底部的标签栏这些平台的基础控件，与界面内的元素不一 Z轴，它们属于界面层，界面的尺寸也不受它们的影响。
如下图哔哩哔哩，Android 和 iOS 的基础控件不一，但是并不会响导航栏下方的 Tab 筛选的大以及它的位置高度。所以事实证，适配跟并没有大的关系。
四、掌握正确的适配规则
1. 倍率相同
适需要在同一倍率下，既要做比的，当要在同一水平上，总不能让一个姚明跟林丹去比羽毛球吧。
知道手机的屏幕分辨率倍率之后，就可以算出其他倍率下，屏幕分辨率多少。比如 iPhone 6的尺寸750*1334（2x下），乘以1.5之后就可以算出3x下的小。
同理可得其他手机的屏幕分辨率不同的倍率下的小，框处表示常的分辨率小。
配只倍率相关，同一倍率下，界面的间距、文字小、icon小一样的，不同的只屏幕显示内的宽度高度不同，所以2x倍率下，750=640=828=720；同理3x倍率下，960=1125=1242=1080。
下面以虾音为例，别对比640、720、750页面上的素大，证实界面上的间距、文字大、icon大都是一的。
2. 适配三原则
配的时候通常会遵循三配原则：比缩、弹性控件、文字流自应。
等比缩放
等比缩放指的是该元素的尺寸大小并不是固定的，是跟随着屏幕的大小（一般是宽度）变化而变化。下图 App Store 的搜索结果页，单个预览图的比例是16:9，不管屏幕分辨率何变化，图比例并不生变化。
标注的时，我们也只需要标注页边距、图比例、图之间的间距就，开就以把适规则写成随屏幕宽度变化而变化。
弹性控件
弹性控件指是元素尺寸不变，距随着屏幕宽度自适应，屏幕越宽，距越大。
字流自适应
一行字的数量多和屏幕宽成正，屏幕越宽，一行显示的字数量就越多。
3. 适配跟平台基础控件无关
其实并不是界面的所有素都需要进行适配的，只需要适配中间那一块域即可。
而上下导航的高度不固定，每个的高度不一。比如 iOS 的导航栏是88px，Android 有112px、104px ……但是不管高度如何，只需要做让素居中即可。
4. 实际例子
了那么多，时候一实际的例子了，配其实总结起就三骤，先换算至同一倍率，再去调整界面元素，后将调整好的界面按照倍率还原到始需配的尺寸。
750何适至1242
首先适需要在同一个倍率下，750*1334是2x 下的，1242*2208是3x 下的，根据倍率换1242 的2x 大小是828*1472。
所以将750*1334配至1242*2208，就需先把750配828*1472，然后再将调整好的界面×1.5 到1242*2208。
其他的比如750如何配至720、640，原理一样的，他们的倍率一样的，就省了尾的那两，只需根据配三原则调整界面元素即可。
五、需要注意的点
1. 小屏幕适配
我们的设计尺寸基是用750的居，就涉及到小屏幕的适问题，当一个元素在750上显示的效果很完美，到640上能就放不下。所以在做图的时，设计师是需要用动态的眼光去考虑问题。下面就来讲述几个最常出现的问题。
2. 弹窗
下图弹框的样式，在设计尺寸750上显示很完美，但是不做任何整，直接适应到640的屏幕上，就放不下。所以个时，我们就需要定义一适规则，比小屏幕缩小字号，间距缩小等。
3. 文字截断距离
屏幕大小会接影响到显示数，数右侧有元素时候，涉及到文和元素安全截断距离。换句话说，也是文最多能显示区域。很多时候设计师在做设计稿时候，没有考虑到文极端情况，这导致在小屏幕时候，文和元素生叠现象。
比下图的爱奇艺我的页面，在750的界面上昵称显示的很完美，但是到640上就显示不，就需要我们定义一下文字显示的区域，当文字长度超个区域的时，文字省略，用「…」代替。
4. 平台差异
iOS 和Android 两端系统级控件样不，所以我们可以为两端单独做几个样，这个成本不大，效却很好。比如 iOS 平台搜索框是矩形，而 Android 搜索是下划线。
5. 单屏页面
大分我们做的界面适配都是考虑屏幕宽多，只会影响到一屏幕显示容的多，屏幕显示的容就长一点。对于瀑布流布来说，需要进行适配。但总是有一些特殊的单屏页面，如：音乐播放页面、空白页面……需要在有屏幕上显示一样多的容。
空白页面
类似图这种较简单的页面，如果固定上方间距，那么在大屏幕上就会显得容偏上，这个时候要想有屏幕显示的容都一样，我们可将上方和方的空白区设置一个例，这样管在么屏幕上，容相较于整个屏幕来说，位置都是一样的。
具体计算法：屏幕高度减去上下导航，再减去内容区域高度，剩下区域按照比例来分配。上占3/7，下占4/7。
音乐播放页面
这个页面相较于空白页面来说，复杂一些，但是原是一样的。把够按照基础适配规则的地方固定来，留一些自适应的分。如图易音乐，同是2x的界面，播放操作区域的都是一样的，按照基础适配规则来的，而光盘区域则是固定左右间距得。
而需要根据屏幕自适应的区域只有绿色矩形区域，实有没有发现把这个图简后，就和上面讲的空白页面的适配方法一了。不过需要注的是适应的部不要超过个，超过个之后，变数大，不利于计算，也没大必要。
六、设计稿尺寸
至于设稿尺寸，我看并特别本质的区别。从原理看，可以用任何用的设尺寸。只不过从配的角度，750（2x）、720（2x）、375（1x）这三相对合些。
之前用过750，也用过720，那候就想不为什还有人用1x做图，现在市面上都没1x的机了，用1x做图导出2x、3x 图标不都虚边了。但后来换了一个新工作，同事都是用的375（1x）做图，习惯了之后发现者并没有大的别。
只是有些图标是整数的时候，需要手导2x、3x，但实就算750（2x）做图怕图标虚边，还是要手导3x的，都一样。1x的好处是，很多国外的资源都是1x做的，就可直接了。
需要注意是，在1x下做分割线时候，需要改成0.5px，这样导出2x图后才会是1px。议分割线用内阴影做，而不要接用0.5px线。
七、小技巧
我们做图时候，想要快速知前页元素在小屏幕上是否放下？那不能都把前页拖动到小屏幕上看看实效吧。这样成本也太大，其实有个常简便法可以解决这个问题。
750和640的界面相差110px（2x下），我们只需要在750的界面上减去110，看是否能放的下，果放的下，就表示在小屏幕上也能放下。
果想要道字数是否能放的下，也以通计的方式得出结论，用110px除以字号大小，就以得出小屏幕的比设计稿少显示几个字。比字号是30px，在750的屏幕上能显示30个字，么在小屏幕上就只能显示26个字。
八、总结
最后来结下全文最要几，帮助大家加深印象。
传统的等比拉伸界面去适的方法是错误的，也是极其浪费人力成的，完以一稿适所有； 适跟平台无关，只跟倍率相关，750和720的尺寸从适的角度来看，是一样的，只是界面尺寸相差30px； 适三原则：等比缩放、弹控件、文字流自适应； 适不要标死，要用动态的眼光去看，做的时需要考虑到极端情况，最常见的比小屏幕适问题……
配这概念很特殊，它看起很简单，简单到多数人都觉得自己会了，不用再去研究了，但其实只懂了皮毛，并不清楚原理。比如很多人都自己会 PS ，但那些专业的比起，自己所认自己知道的不过冰山一角。所以我们时刻保持一颗求知的，不总固执的坚持己见，共勉。
欢迎关注作者的公众号：「海盐社」
图片素材作者：Daria
浙公网安备33011002017549号