本系列的是参考慕课网 远人老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。
响应式布局背景介绍
响应式布局，要求服务器端根据不同大小，不同分辨率的客户端，呈现出不同的页面显示效果。
响应式设计的优点：针对不同的设备，进行差异化显示，优化了不同设备的显示效果
响应式设计的缺点：
- 兼容性代码多，工作量大，加载速度受到影响
- 用户设备的判断未必精确
一般，需要进行响应式设计的网站都是经常在多终端展示的网站。
响应式设计的原则
- 移动优先：在网页设计的初期就要考虑多终端展示的效果，并且重点考虑在移动端展示的效果，因为移动端的布局比PC端更加苛刻。
- 渐进增强：要针对老版本浏览器，重点完成内容显示的完整性。针对新版本的浏览器，加入最新的 feature 进行显示的实现。
实现方法
- css3 Media Query，这种实现方法最简单
- JavaScript，实现成本高，不推荐
- 第三方开源框架(Boostrap 等)
CSS3-Media Query
常见的属性：
- device-width、device-height：屏幕宽高
- width、height：渲染窗口宽高
- orientation：设备方向
- resolution：屏幕分辨率