一、什么是自适应
名词解释：2010年，Ethan Marcotte提出了 “自适应网页设计” （Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
即达到——”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）。
实现效果：同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果
例如：
在最初提出的自适应是为了实现跨屏展示，以避免需要为pc/平板/手机分别做3套设计和代码。
随着智能手机的发展，尺寸有小到大，分辨率有小到大，品牌繁多，尺寸繁多，因此又衍生出手机端的自适应规则——自动识别屏幕宽度，保持同样的网页设计。关于手机端的自适应，可以参考将px转化成rem—gulp postcss-px2rem
名词分析：
屏幕宽度：
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。
普遍的像素大小有–百度baike.baidu.com/item/屏幕分辨率/…：
屏幕比例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) { ... }
| 尺寸 | 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）
