移动web（四）响应式布局、媒体查询

移动web（四）响应式布局、媒体查询

1、响应式布局的概念

一个网站可以兼容多个终端

2、响应式网站和传统pc端之间的差异性

1）内容差异（响应式网站内容相对较少，而pc端相对较多）
2）布局上的差异（响应式的布局较为简单，而pc端布局较为复杂）
3）兼容性上的差异（响应式网站兼容会较差，而pc端没有兼容问题）
注：这个兼容说的是浏览器的兼容

3、媒体查询

1）作用：针对不同的屏幕大小链接不同的css样式
2）方式：外链式媒体查询、内嵌式迭代写法

4、外链式媒体查询

直接在html文件里面用link标签配合media属性实现媒体查询

<link rel="stylesheet" href="red.css" media="(min-width:980px)">
<link rel="stylesheet" href="green.css" media="(max-width:979px) and (min-width:540px)">
<link rel="stylesheet" href="blue.css" media="(max-width:539px)">

说明： px后面一定不能跟分号，区间与区间之间用and关键字链接，前后必须要有空格

弊端：
   1）每一个css都是独立的，修改起来不方便 
   2）css太多了，请求就多了，不利于优化

5、内嵌式迭代媒体查询

写在css里面，利用media关键字实现媒体查询

 @media (判断条件) {    
               css语句 
              }

小技巧：先写最大范围的css，然后用小范围的css去覆盖掉一些我们要修改的css

6、Bootstrap

中文官网：http://www.bootcss.com/

是一个UI框架，两个很牛的人写了一堆（下拉菜单，导航，按钮.....并且还具备JS特效），我们只需要引入这个框架，并且复制它的结构代码就能实现某些功能，并且同时具备栅格化（自动响应式）。

什么时候运用？
（1）没有设计图的时候 只有原型图
（2）项目比较赶
（3）制作一些简约类型的网站的时候，说白了就是跟bootstrap提供的风格很类似的时候的网站可以去运用
（4）不适合一些定制类的网站，或者一些复杂的网站，例如电商这种的，更适合做一些企业站或者后台管理系统界面