响应式布局

作用：

1. 让一个网站可以兼容不同分辨率的设备
2. 给用户更好的视觉使用体验

优缺点

• 优点：解决了设备之间的差异化展示
• 缺点：兼容性代码多，工作量大，加载速度受影响

原则

1. 移动设备优先：在设计初期就要考虑页面如何在多终端显示
2. 渐进增强：充分发挥硬件设备的最大功能

如何实现响应式布局

1. CSS3-Media Query

   	/*当屏幕尺寸大于480px时候，背景颜色是蓝色*/
   	@media screen and(min-width:480px){
   		body{
   			background-color:blue
   		}
   	}
   	/*当屏幕尺寸小于480px时候，背景颜色是蓝色*/
   	@media screen and(max-width:480px){
   		body{
   			background-color:red
   		}
   	}
   

2. 第三方开源框架（bootstrap）
   要使用bootstrap需要将bootstrap的一些文件引入到html文件里，我们可以去Bootstrap官网下载这些文件。或者不下载也可以通过用BootCDN的方式引入，只需要一个链接就可以了。
   引入bootstrap.min.css jquery.min.js bootstrap.min.js,第五行的标签是用来支持移动设备响应式布局的。
   ⚠️：jquery.min.js文件必须放在bootstrap.min.js之前，因为bootstrap的js组件依赖jquery。
   ⚠️：不用bootstrap的js组件，只要响应式布局，只需要引入bootstrap.min.css就OK

3. 借助原生JavaScript（IE6、7、8，成本高，不推荐使用）