本文首发简书。

• 前言

  在UI设计工作中，设计师往往更关注如何做出好看的图，而忽略屏幕的适配。在实际项目中，设计稿的最终落地才是最重要的，我们要熟悉开发的适配规则才能设计出实际可用的设计稿，所以我们要把适配当做一项基本技能牢牢掌握。
  像蓝湖、zeplin等一些标注软件虽然功能很全面，提升了设计师的效率，但它们也有自己的短板：每个间距尺寸都标注出来，反而不知道该怎么适配，这个时候开发就会凭感觉，按自己的喜好做适配。
  下面我就尝试介绍几种常见的适配方式，希望能让你们理解适配的重要性，以及当下标注工具的弊端。

  一、定位方式

  在说明适配方式之前得先说说定位方式，页面布局首先是要规定一个元素在页面中的位置，其次再是在各个屏幕中的展现规则。
  同样一个页面，里面元素的位置描述也可能会有很多种，举个简单的例子。
  下图中按钮的位置最简有几种表述方式？

  
  

  

  
  

  1. 表述按钮x轴上距离左边100，y轴上距离上边200/距离下边500；

  
  

  

  
  

  
  

  
  

  2. 表述按钮x轴上居中，y轴上距离上边200。

  
  

  

  3. 表述按钮x轴上居中，y轴上距离中线100，

  

  4. 等等…

  
  

  基于以上几种排版方式，我们挨个来探讨与之相应的适配方式。

  
  

  
  

  
  

  
  

  一、按钮的适配

  方式一：固定间距，按钮宽度自适应

  如果假定按钮的定位方式为：x轴上距离左边100，y轴上距离上边200。
  那么常见的适配方式为：固定按钮的高度，x轴上距离两边100，宽度自适应。
  

  方式二：固定按钮宽高，定位自适应

  如果假定按钮的定位方式为：x轴上居中，y轴上距离上边200。
  那么常见的适配方式为：固定按钮的宽高。
  

  二、卡片的适配

  方式一：固定卡片的宽高，定位间距自适应

  把上图三个卡片看成一个整体，假设上图卡片的定位方式为：整体x、y轴上居中，内部卡片中线等分。
  
  常见的适配方式为：固定卡片的宽高。
  

  方式二：固定间距，卡片宽高自适应

  假设上图卡片的定位方式为：x轴上距离左边为40，y轴上距离上边为80，卡片之间的间距为20。
  
  常见的适配方式为：所有卡片看成整体，x轴上距离两边40，y轴上距离上下80，间距不变，卡片宽高自适应。
  

  方式三：固定卡片宽高，卡片数量自适应

  
  

1. 假设三个卡片看成整体，x轴上居中，y轴上居中，y轴最小边距分别为40；

2. 当屏幕高度变大时，y轴边距分别小于150时卡片数量不变，反之增加卡片数量；

3. 虚线部分为增加的卡片。

三、REM适配

什么是rem？rem是一个相对单位，简单来说，当你的前端工程师用rem作为单位标记一个按钮的宽高时，按钮的大小就会根据屏幕尺寸做自适应。

rem除了标记尺寸还可以标记间距，设计们只需要说明好定位方式就可以了。

扩展阅读

想更全面了解rem可以参考下面这篇文章

web app变革之rem – 腾讯ISUX

这是几篇我认为写得比较详细的适配文章，主要针对iOS和Android端，看完就能系统地了解当下流行的屏幕适配了。虽然公司目前的项目都是用web前端技术实现，适配方式都是异曲同工的。

第一篇：UI适配攻略·教程①名词阐述&倍率选择

第二篇：UI适配攻略·教程②Android&iPhone碎片化误区

第三篇：UI适配攻略·教程③规范的误区+适配原则/方法

第四篇：UI适配攻略·教程④一稿配双平台

第五篇：UI适配攻略·教程⑤【最终篇】详解验收