前两天在跟别的项目沟通适配的时候，傻白甜的设计一脸莫名其妙的问我，什么适配啊？我们为什么还要管适配啊？这不是前端要管的事情吗？
真的是这样吗？这里涉及到一个绕不开的话题，就是设计验收，一旦效果不及预期，设计师就要协助技术人员完成调试，为了提高沟通和协作效率，设计师自然要理解一些相关的专业知识或代码开发。
今天我们就来手把手的教大家，在适配的时候经常会遇到的难题，并且要怎么解决？
错误的做法
首先先说说常见的错误做法，由于部分设计师对适配了解不够透彻，导致在做实际项目的时候，需要把750的设计稿适配到640、720、828的屏幕时，都会以为是把设计稿直接等比拉伸至对应的尺寸，重新标注就可以的(我们公司前端也是这么想的)。
下面以微信为例，左图是750的直接拉伸至828的，右图是实际线上828的界面。
能看出区别了吗？750直接拉伸的比828的内容都要大，而明明750是@2x下的界面，828是@3x下的界面，由此可见直接拉伸是不行的，适配才是解决多端展示的唯一办法，但是适配要怎么做才能在每个设备中都达到视觉统一呢？下面就来看看适配的时候经常会遇到的问题吧！
问题一：简单的界面一定简单吗
以前的时候我们标注的时候就是把页面中所有元素的尺寸、位置、属性一一标清楚，如下如所示：
把所有界面中的尺寸、间距等都标注出来，这样那么在适配的时候要怎么处理呢？如果一直继续这样的手动标注方式，那么你们在遇到简单的页面时，是不是就会觉得很简单？如下图所示：
看到上面两张图如果觉得简单的，那么接下来的内容你要记得认真看哦！
我们以马蜂窝举例说明，适配和标注是需要一起考虑的两个因素，首先一定要先纠正大家的一个误区就是，像上边图中一样，标注的时候就只考虑标注好位置，不考虑适配。
其实越简单的界面适配挺难的，为什么说很难呢？因为我们要保证不管是什么设备，同样的页面视觉上偏差不能太大。要确定自适应的部分，首先要找到固定的那部分，就是在@2x，@3x的情况下，依然不会变的模块，如下图所示：
上图中的橘色覆盖的就是在三个设备中Y轴间距没有改变的部分，这样看起来就简单一些，第二部分到第三部分就是根据屏幕高度自适应的，如下图所示：
这里的适配还涉及到小屏幕的适配问题，当一个元素在750上显示的效果很完美，到640上可能就放不下了。所以在做图的时候，设计师是需要用动态的眼光去考虑问题。如下图所示：
马蜂窝的登陆页面在750的界面上显示的很完美，但是放在640的屏幕上就放不下了，所以就出现了图中第一部分到第二部分的举例缩短，从104px缩小到52px，减少了一半的距离，同时减少了20px输入框的高度，保证视觉上不会产生因为上紧下松的突兀感。需要强调的是，这三个适配界面中字体的大小都是没有变的。
知识点：
在简单的界面中，由于本身界面的内容比较少，确定位置就会比较难，因为要考虑到不同的界面内容要怎么放才能保持视觉统一，这个时候可以先将界面中的信息分成不同的几个部分，先保证每个部分内的固定内容，再确定自适应的内容。
问题二：怎么判断自适应的部分？
我们用一个例子来直接说明会简单一点，这个是我之前做的适配练习，我在适配的时候经常遇到的问题就是不确定哪一部分是自适应的，不过我在练习的时候发现了一些规律，想要分享给你们，先来看看之前的适配练习，如下图所示：
先来说说固定的一些内容：
1、图标或按钮
2、搜索框
高度不变，宽度自适应
3、Y轴间距
一般来说，Y轴的间如果在相近的组件里，都会是固定的，不会有变化
4、图片
像这种图片的列表或者，十字纵横的头像或文字，大小都是固定的，变得会是间距或者数量，如下图所示：
那么哪些是自适应的呢？
1、文字流
文字流指在多行文字的情况下，文字数量变化会影像页面布局和元素大小，如下图所示：
2、banner
这里说的图片是指banner或者feed流里的图片，适配的方法大多都是自适应，界面中的元素间距和数量不变，元素尺寸进行等比缩放，比较适用于固定比例，但尺寸随屏幕宽度变化的元素，如下图所示：
知识点：
对于比较复杂的模块，快速找到将以上所说的固定因素和自适应因素，除了能够让标注效率大大提高之外，还能够找到合适的适配方法，避免出现开发完成后才发现某机型适配效果不理想的情况。
划重点
当我们学会适配之后，最大的变化就是在做设计的同时，可以利用适配原理去预想当前设计在其他机型上的效果，从而帮助我们发现一些可能存在的问题，提前做出应对，也能够更好的与开发区沟通。
