什么是响应式设计？
1.让一个网站可兼容不同分辨率的设备
2.给用户更好的视觉体验
响应式布局的优点和缺点
优点：解决了设备之间的差异化展示，让不同的设备达到最优的视觉体验
缺点：兼容性代码多，工作量大，加载速度受影响
对原有网站布局会产生影响，用户判断未必精准
响应式设计的原则
移动优先：
在设计的初期就要考虑的页面如何在多终端展示
渐进增强：
充分发挥硬件设备的最大功能
eg：在IE6，IE7，IE8浏览器不支持CSS3 的属性，我们就要用js来hack
响应式实现方法
1.CSS3-Media Query 最简单的方式
2.借助原生的JavaScript（对于不支持CSS3浏览器，成本高，不推荐使用）
3.第三方开元框架 可以很好的支持浏览器响应式布局的设计
一.CSS3-Media Query
CSS3-Media Query是根据不同的李玉兰设备给到用户不同展示
1.常见的属性：
device-width,deivce-height-----------屏幕宽高
width,height-------------------------------渲染窗口宽高
orientation--------------------------------设备方向
resolution---------------------------------设备分辨率（dpi）
2.基本语法
外联CSS语法
内嵌样式的语法
外联语法：
外联的样式表中，设置为背景色为红色
media="only screen and (max-width:480px) 这句话表示，只有屏幕在480px 内样式表才显示效果、
内嵌样式的语法：
<style>
@media screen and (min-width:480px) {
body{
background-color:blue;
}
}
</style>
只有在屏幕宽度大于480px,才会显示背景为蓝色
二.bootstraps框架响应式开发
框架帮我们解决了低浏览器不支持的CSS3缺点，一款移动端优先的前端框架
对于IE8浏览器呢，需要引用Responds.js 来支持media query
1.bootstrap使用首先要设置一个meta标签
<meta name="viewport" content="width=decice-width,initial-scale=1.0"> //initial-scale=1.0 默认的是不设置缩放
2.引入bootstrap css文件
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
3.为了兼容IE8以下的浏览器呢，我们需要兼容引入Responds.js，操作如下: <!--[if lt IE 9]-->
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<!--[endif]-->
4.只涉及响应式布局，不需要这两个部分内容，如果需要事件之类的需要引入bootstrap.js文件，而它的使用需要引入jQuery。
<script src="juery.js"></script>
<script src="bootstrap.min.js"></script>
如此页面框架便搭建便完成了。
CSS布局常用组件
栅格系统，即为列布局
行必须放在.container中
当屏幕在768px以下的时候（.col-xs-），使用的垂直布局，大于768px的话，可以垂直布局可以水平布局，自适应
Buttons,重要的组件，设置按钮的样式，按钮可响应
网站整体的布局
components 组件
bootatrap本身提供了现成的组件和结构，对组件进行改造，可以达到预期的效果。
