一：响应式图片（自动缩放可以，但为了节省带宽）、响应式视频、响应式包含框
1.如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小。 同理min-width！ （字面意思直接就理解了）
2.viewport
3.桌面电脑 平板
4.响应式图片 默认是绝对大小，但设置了相对大小后，因为屏幕视口变化了，所以此时内部样式表就起作用了！ OO
5.768 992 1200
xs:手机（<768）
sm：平板
md：笔记本、电脑台式机
lg：超大屏幕
6. 响应式调研： Viewport、网格视图、媒体查询、弹性盒子
1.viewport：视口 手机的视口比屏幕宽，不想平板和PC 保证页面布局不会被破坏，但屏幕就这么大，所以出现了滚动条 ！
2.<meta name="viewport" content="width=device-width, initial-scale=1.0">
设置视口，宽度=设置宽度（页面布局就会被破坏，不会出现滚动条）
3.网格视图，按列布局页面。
媒体查询： 可以查询设备类型 查询设备viewport（屏幕宽度） 设备方向（landscape、portrait）
1.添加断点
2.桌面设备 平板设备 手机设备
3.手持设备的设备方向定义： 一般都是高度大于宽度的！ 手机的高度大于宽度：所以定义为竖屏！
响应式解决方案：
1.媒体查询，加载不同尺寸的图片。节省带宽！
2.采用第三方的服务，返回给你src服务。 就是一个代理服务器，图片返回到客户端前由代理服务器处理。
总结：
1.响应式就是采用相对单位来布局！ 比如百分比! 字体设置用em、rem等。
2.响应式设计页面的meta标签必须设置为不可缩放哦！ 这样才能出现滚动条。 而响应式是为了使页面缩放也不会出现滚动条。
资料：
1.http://www.cnblogs.com/tugenhua0707/p/5260411.html
2.http://www.cnblogs.com/tugenhua0707/p/5260411.html （图片）
3.http://www.cnblogs.com/tugenhua0707/p/5568734.html
4.菜鸟教程 CSS
5.https://www.zhihu.com/question/35221839（响应式单位）
http://mp.weixin.qq.com/s?__biz=MzA5NTM2MTEzNw==&mid=388124021&idx=1&sn=175ee9b47b17dde0f30f6c42130ed5e2&scene=2&srcid=10014LSu0sE98eaP14RHzaMw&from=timeline&isappinstalled=0#rd（同上）
6.https://www.zhihu.com/topic/19686500/hot