响应式开发

什么是响应式设计？

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本身提供了现成的组件和结构，对组件进行改造，可以达到预期的效果。