前两天在跟别的项目沟通适配的时候，傻白甜的设计一脸莫名其妙的问我，什么适配啊？我们为什么还要管适配啊？这不是前端要管的事情吗？

真的是这样吗？这里涉及到一个绕不开的话题，就是设计验收，一旦效果不及预期，设计师就要协助技术人员完成调试，为了提高沟通和协作效率，设计师自然要理解一些相关的专业知识或代码开发。

错误的做法

首先先说说常见的错误做法，由于部分设计师对适配了解不够透彻，导致在做实际项目的时候，需要把750的设计稿适配到640、720、828的屏幕时，都会以为是把设计稿直接等比拉伸至对应的尺寸，重新标注就可以的。

其实越简单的界面适配挺难的，为什么说很难呢？因为我们要保证不管是什么设备，同样的页面视觉上偏差不能太大。要确定自适应的部分，首先要找到固定的那部分，就是在@2x，@3x的情况下，依然不会变的模块。

马蜂窝的登陆页面在750的界面上显示的很完美，但是放在640的屏幕上就放不下了，所以就出现了图中第一部分到第二部分的举例缩短，从104px缩小到52px，减少了一半的距离，同时减少了20px输入框的高度，保证视觉上不会产生因为上紧下松的突兀感。需要强调的是，这三个适配界面中字体的大小都是没有变的。

知识点：在简单的界面中，由于本身界面的内容比较少，确定位置就会比较难，因为要考虑到不同的界面内容要怎么放才能保持视觉统一，这个时候可以先将界面中的信息分成不同的几个部分，先保证每个部分内的固定内容，再确定自适应的内容。

对于比较复杂的模块，快速找到将以上所说的固定因素和自适应因素，除了能够让标注效率大大提高之外，还能够找到合适的适配方法，避免出现开发完成后才发现某机型适配效果不理想的情况。

当我们学会适配之后，最大的变化就是在做设计的同时，可以利用适配原理去预想当前设计在其他机型上的效果，从而帮助我们发现一些可能存在的问题，提前做出应对，也能够更好的与开发区沟通。

免责声明：以下文章来源于海盐社 ，作者潘团子。文章内容来源于网络，如有侵权，请联系我们删除。