一、什么是自适应

名词解释：2010年，Ethan Marcotte提出了 “自适应网页设计” （Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

即达到——”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）。

实现效果：同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果

例如：

在最初提出的自适应是为了实现跨屏展示，以避免需要为pc/平板/手机分别做3套设计和代码。

随着智能手机的发展，尺寸有小到大，分辨率有小到大，品牌繁多，尺寸繁多，因此又衍生出手机端的自适应规则——自动识别屏幕宽度，保持同样的网页设计。关于手机端的自适应，可以参考将px转化成rem—gulp postcss-px2rem

名词分析：

屏幕宽度：

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。

普遍的像素大小有–百度https://baike.baidu.com/item/屏幕分辨率/2193029?fr=aladdin：

屏幕比例4:3，是最常见屏幕比例，从电视时代流传下来的古老标准。在近代宽屏幕兴起前，绝大部分的屏幕分辨率都是照着这个比例的。

640×480； 800×600；1024×768；1400×1050；1600×1200； 2048×1536；

屏幕比例16:10，就是常见的「宽屏幕」比例

800×480；1024×600； 1280×800；1440×900；1680×1050； 1920×1200；2560×1600

屏幕比例16:9 ，主要是HD电视在用的比例。常听到的720p、1080p 都是这个比例。是一种适合视频观赏和办公操作（容纳两个文档并排处理）但对于游戏支持相对差一些（逐渐得到更多的游戏支持）的屏幕格式。

960 x 540；1280×720；1366×768； 1920×1080；2560 x 1440

根据已有的电脑屏幕尺寸，在没有市场流通尺寸的大数据的支持下，我们无法决定在哪个像素的临界值，调整样式排版，我们可以参考实现了自适应的前端框架（流行度高，大公司手笔）进行参考！

在需要有设计效果图的时候，设计师需要根据当前项目的前端技术选型，根据不同的临界值进行相应的设计。例如element-ui,需要的设计图分别为：1200px,992px,768px时候的样式排版；如果不针对手机端，小于992px的可以不用设计

实现了自适应的前端框架：

bootstrap ,其栅格变化控制的像素大小为

// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

amazeUI, 其栅格变化控制的像素大小为

尺寸	class 简写	断点区间	描述
small	sm	0 – 640px	处理绝大数手机的横竖屏模式（Galaxy Note 2 的视口为 360 * 640）
medium	md	641px – 1024px	平板的横竖屏模式
large	lg	1025px +	桌面设备

基于Vue的UI框架：ElementUI ,其栅格变化控制的像素大小为

xs	<768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})
sm	≥768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})
md	≥992px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})
lg	≥1200px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})
xl	≥1920px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})

基于React的UI框架：AntDesign ，其栅格变化控制的像素大小为

xs	<576px 响应式栅格，可为栅格数或一个包含其他属性的对象
sm	≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象
md	≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
lg	≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
xl	≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
xxl	≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象

二、自适应的实现

在上述的定义里面的前提——自动识别屏幕宽度

实现方法，在网页代码的头部，加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" />

在上述的定义里面的实现效果——样式、排版布局实现相应调整

依据原理：排版设计以及长宽定义，参考百分比设置

1、不能使用绝对宽度——width:xxx px; 只能采用百分比或者auto——width: xx%; width:auto;

2、相对字体大小，em

3、流动布局——各个区块的位置都是浮动的，不是固定不变的

在需要有设计效果图的时候，设计师在排版上面，需要考虑每个模块占据的百分比例，而不能设置具体的px值。

针对需要进行块状区分的组件，可以固定其上下左右padding和margin,让其宽度auto。

如果涉及到需要px定义的地方，最好保证这个px值在各个屏幕下面保持不变。

三、一套完整的自适应UI包含的元素

1、表单——输入框，下拉框，单选，多选，日期

2、表格，分页

3、通用组件——loading，提示框，文本弹框

4、导航，菜单

5、通用动态图文排版——tab切换；下拉展示，收缩隐藏；图文混排快装样式；点击展示

6、基础通用——颜色，字体，按钮，图标

多样性设计原则：

1、在作出每个元素设计界面的同时，需要考虑它在不同屏幕下展现的样式（等比例缩放的样子）；

2、针对表单类组件，还需要考虑，在输入正确、错误、选中等情况下的样子，以及文字多、少的样式，以及是否带单位的展现样式；

3、根据使用项目功能，可能继而延伸或增加的样式

四、设计注意事项

1、针对适用于手机端——界面小，排版清晰，突出内容；节省流量，元素尽量瘦身；这也是扁平化流行的背景

2、界面设计能够在不同屏幕下变化顺畅—— 尽量减少“设计元素”——不规则排版设计，大块的图片背景，大量的渐变

五、自适应设计原则

1、不增加模块，比如，本来一页中包含产品展示、新闻资讯两个模块，在小屏下，需要增加关于我们模块

2、不更改模块内部排版样

3、模块变化仅限于等比例放大或者收缩、换排、换行、隐藏。比如，一张图片宽度永远占据屏幕的总宽度，在小屏下，图片的高度等比例缩短；一排并列4个，在小屏下，一排并列2个；设计中标题展示了一排，在小屏下面，两排展示

4、允许局部小范围模块的排版变化（通过@media针对特定的屏幕范围再写一套排版代码）

六、参考

自适应网页设计（Responsive Web Design）

bootstrap

基于Vue的UI框架：ElementUI

基于React的UI框架：AntDesign