响应式

1、什么是响应式

响应式指同一个网站，在不同的设备或者不同的尺寸下，显示不一样的样式，做到多设备多尺寸的兼容。

2、主流兼容设备

• phone
• ipad
• pc

3、响应式不适用场景

• 不适用于页面动态交互效果较多的网站 https://miaov.com/
• 不适用于小屏幕设计图和大屏幕设计图内容差别较大的网站 https://www.taobao.com/

4、网站案例展示

https://jquery.com/
http://www.uedna.com/

5、响应式框架

• Bootstrap
• Element-UI
• Semantic-UI

6、官网地址

http://www.bootcss.com/

7、栅格功能

• 媒询
• 布局容器
• 行
• 列
• 列偏移
• 列排序

8、bootstrap栅格缺点

• 无法完全贴合设计图
• 加载样式庞大
• 自带默认样式烦人，开发总是出bug

9、自定义栅格系统基础功能

• 媒询
• 布局容器
• 行
• 列

10、媒询（@media）

在对应的媒体设备和媒体特征下，解析对应的媒询样式

11、媒体设备

• all 所有
• screen 彩屏

12、媒体特征

• max-width
• min-width

13、媒体关键词

• not
• and
• only

14、布局容器 - 固定宽度布局容器

固定一个宽度，在页面的中间显示，小屏幕状态下，
百分百显示

15、响应式网站开发注意事项

• 必须考虑多个尺寸页面的情况
• 兼顾pc和移动端事件处理的不同
• 多情况多种处理方案
  
  • 两列布局
  • 列
  • 弹性盒模型
• 小屏幕到大屏幕开发，样式更简短