前言
在UI設計工作中遍坟，設計師往往更關注如何做出好看的圖，而忽略屏幕的適配资盅。在實際項目中调榄，設計稿的最終落地才是最重要的，我們要熟悉開發(fā)的適配規(guī)則才能設計出實際可用的設計稿呵扛，所以我們要把適配當做一項基本技能牢牢掌握每庆。
像藍湖、zeplin等一些標注軟件雖然功能很全面择份，提升了設計師的效率扣孟，但它們也有自己的短板：每個間距尺寸都標注出來，反而不知道該怎么適配荣赶，這個時候開發(fā)就會憑感覺凤价，按自己的喜好做適配。
下面我就嘗試介紹幾種常見的適配方式拔创，希望能讓你們理解適配的重要性利诺，以及當下標注工具的弊端。
一剩燥、定位方式
在說明適配方式之前得先說說定位方式慢逾，頁面布局首先是要規(guī)定一個元素在頁面中的位置，其次再是在各個屏幕中的展現(xiàn)規(guī)則灭红。
同樣一個頁面侣滩，里面元素的位置描述也可能會有很多種，舉個簡單的例子变擒。
下圖中按鈕的位置最簡有幾種表述方式君珠？
-
表述按鈕x軸上距離左邊100，y軸上距離上邊200/距離下邊500娇斑；
image
img -
表述按鈕x軸上居中策添，y軸上距離上邊200。
image -
表述按鈕x軸上居中毫缆，y軸上距離中線100唯竹，
img 等等...
基于以上幾種排版方式，我們挨個來探討與之相應的適配方式苦丁。
一浸颓、按鈕的適配
方式一：固定間距，按鈕寬度自適應
如果假定按鈕的定位方式為：x軸上距離左邊100，y軸上距離上邊200猾愿。
那么常見的適配方式為：固定按鈕的高度鹦聪，x軸上距離兩邊100，寬度自適應蒂秘。
方式二：固定按鈕寬高泽本，定位自適應
如果假定按鈕的定位方式為：x軸上居中，y軸上距離上邊200姻僧。
那么常見的適配方式為：固定按鈕的寬高规丽。
二、卡片的適配
方式一：固定卡片的寬高撇贺，定位間距自適應
把上圖三個卡片看成一個整體赌莺，假設上圖卡片的定位方式為：整體x、y軸上居中松嘶，內(nèi)部卡片中線等分艘狭。
常見的適配方式為：固定卡片的寬高。
方式二：固定間距翠订，卡片寬高自適應
假設上圖卡片的定位方式為：x軸上距離左邊為40巢音，y軸上距離上邊為80，卡片之間的間距為20尽超。
常見的適配方式為：所有卡片看成整體官撼，x軸上距離兩邊40，y軸上距離上下80似谁，間距不變傲绣，卡片寬高自適應。
方式三：固定卡片寬高巩踏，卡片數(shù)量自適應
- 假設三個卡片看成整體秃诵，x軸上居中，y軸上居中塞琼，y軸最小邊距分別為40顷链；
- 當屏幕高度變大時，y軸邊距分別小于150時卡片數(shù)量不變屈梁，反之增加卡片數(shù)量；
- 虛線部分為增加的卡片榛了。
三在讶、REM適配
什么是rem？rem是一個相對單位霜大，簡單來說构哺，當你的前端工程師用rem作為單位標記一個按鈕的寬高時，按鈕的大小就會根據(jù)屏幕尺寸做自適應。
rem除了標記尺寸還可以標記間距曙强，設計們只需要說明好定位方式就可以了残拐。
擴展閱讀
想更全面了解rem可以參考下面這篇文章
這是幾篇我認為寫得比較詳細的適配文章，主要針對iOS和Android端碟嘴，看完就能系統(tǒng)地了解當下流行的屏幕適配了溪食。雖然公司目前的項目都是用web前端技術實現(xiàn)，適配方式都是異曲同工的娜扇。
第二篇：UI適配攻略·教程②Android&iPhone碎片化誤區(qū)
第三篇：UI適配攻略·教程③規(guī)范的誤區(qū)+適配原則/方法
第四篇：UI適配攻略·教程④一稿配雙平臺
