前言
在UI设计工作中，设计师往往更关注如何做出好看的图，而忽略屏幕的适配。在实际项目中，设计稿的最终落地才是最重要的，我们要熟悉开发的适配规则才能设计出实际可用的设计稿，所以我们要把适配当做一项基本技能牢牢掌握。
像蓝湖、zeplin等一些标注软件虽然功能很全面，提升了设计师的效率，但它们也有自己的短板：每个间距尺寸都标注出来，反而不知道该怎么适配，这个时候开发就会凭感觉，按自己的喜好做适配。
下面我就尝试介绍几种常见的适配方式，希望能让你们理解适配的重要性，以及当下标注工具的弊端。
一、定位方式
在说明适配方式之前得先说说定位方式，页面布局首先是要规定一个元素在页面中的位置，其次再是在各个屏幕中的展现规则。
同样一个页面，里面元素的位置描述也可能会有很多种，举个简单的例子。
下图中按钮的位置最简有几种表述方式？
image
-
表述按钮x轴上距离左边100，y轴上距离上边200/距离下边500；
image
img
-
表述按钮x轴上居中，y轴上距离上边200。
image
-
表述按钮x轴上居中，y轴上距离中线100，
img
-
等等...
基于以上几种排版方式，我们挨个来探讨与之相应的适配方式。
一、按钮的适配
方式一：固定间距，按钮宽度自适应
如果假定按钮的定位方式为：x轴上距离左边100，y轴上距离上边200。
那么常见的适配方式为：固定按钮的高度，x轴上距离两边100，宽度自适应。
img
方式二：固定按钮宽高，定位自适应
如果假定按钮的定位方式为：x轴上居中，y轴上距离上边200。
那么常见的适配方式为：固定按钮的宽高。
image
二、卡片的适配
方式一：固定卡片的宽高，定位间距自适应
把上图三个卡片看成一个整体，假设上图卡片的定位方式为：整体x、y轴上居中，内部卡片中线等分。
img
常见的适配方式为：固定卡片的宽高。
image
方式二：固定间距，卡片宽高自适应
假设上图卡片的定位方式为：x轴上距离左边为40，y轴上距离上边为80，卡片之间的间距为20。
image
常见的适配方式为：所有卡片看成整体，x轴上距离两边40，y轴上距离上下80，间距不变，卡片宽高自适应。
image
方式三：固定卡片宽高，卡片数量自适应
image
- 假设三个卡片看成整体，x轴上居中，y轴上居中，y轴最小边距分别为40；
- 当屏幕高度变大时，y轴边距分别小于150时卡片数量不变，反之增加卡片数量；
- 虚线部分为增加的卡片。
三、REM适配
什么是rem？rem是一个相对单位，简单来说，当你的前端工程师用rem作为单位标记一个按钮的宽高时，按钮的大小就会根据屏幕尺寸做自适应。
rem除了标记尺寸还可以标记间距，设计们只需要说明好定位方式就可以了。
image
扩展阅读
想更全面了解rem可以参考下面这篇文章
这是几篇我认为写得比较详细的适配文章，主要针对iOS和Android端，看完就能系统地了解当下流行的屏幕适配了。虽然公司目前的项目都是用web前端技术实现，适配方式都是异曲同工的。
第二篇：UI适配攻略·教程②Android&iPhone碎片化误区
第四篇：UI适配攻略·教程④一稿配双平台
网友评论