一、响应式布局的简单介绍
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
如图：根据设备的不同便有不同的适应效果
二、响应式设计的步骤
1、meta标签的简单介绍
a)meta标签的粗略说明：
位于HTML文档的<head>和<title>之间（一般）；
有http-equiv属性和name属性；
用来描述HTML网页文档的属性，如：作者、日期（时间）、网页描述、关键词、页面刷新等。
b)
必需的属性
属性 | 值 | 描述 |
some_text | 定义与 http-equiv 或 name 属性相关的元信息 |
可选的属性
属性 | 值 | 描述 |
| 把 content 属性关联到 HTTP 头部。 语法格式：<meta http-equiv="参数"content="参数变量值"> | |
| 把 content 属性关联到一个名称。 语法格式：<meta name="参数"content="具体的参数值"> | |
some_text | 定义用于翻译 content 属性值的格式。 |
c)http-equiv用法与说明
- 用以说明主页制作所使用的文字以及语言（网页使用的语言）
<meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80">和 <meta http-equiv="Content-Language" content="zh-CN"/>
- 定时让网页在指定的时间n内，跳转到你的页面（定时跳转）
<meta http-equiv="Refresh" content="n;url=http://www......."/>
- 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式（GMT：格林尼标准时间；北京时间=GMT时间+8小时）
<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT"/>设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出（禁止调用缓存）（
Cache指缓存SRAM。 SRAM叫静态内存,下面那样设定，访问者将无法脱机浏览。）
<meta http-equiv="Pragma" content="no-cache"/>- cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式（网页过期删除cookie）
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT"/>- 网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的
<meta http-equiv="Pics-label" content=""/>- 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用
<meta http-equiv="windows-Target" content="_top"/>- 设定进入和离开页面时的特殊效果，这个功能即FrontPage中的"格式/网页过渡"，不过所加的页面不能够是一个frame页面（duration表示持续时间，transition表示过度）
<meta http-equiv="Page-Enter" content="revealTrans（duration=10,transition= 50）">和<meta http-equiv="Page-Exit" content="revealTrans（duration=20，transition=6）"/>
- 指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
<meta http-equiv="imagetoolbar"content="false"/>
- W3C网页规范，指明页面中脚本的类型
<Meta http-equiv="Content-Script-Type" Content="text/javascript"/>
name案例：
<meta name="keywords" content="<%=site.seo_keywords%>"/>
<meta name="description" content="<%=site.seo_description%>"/>
<meta name="author" content="XXX公司"/>
<meta name="generator" content="XXX公司"/>
2、设置meta标签
(响应式布局正式开始)在使用媒体查询media之前我们需要先设置meta标签，对设备的缩放等参数进行设定。
<!--设置缩放和绘制-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">参数解释：
width=device-width 宽度等于当前设备宽度
initial-scale=1.0 初始缩放比例，默认为1.0
minimun-scale=1.0 允许用户缩放到的最小比例，默认为1.0
maximun-scale=1.0允许用户缩放到最大比例，默认为1.0
user-scalebel=no 用户是否可以手动缩放，默认设置为no（不允许用户缩放页面）
3、加载IE兼容文件
因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->4、设置IE默认渲染方式
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:解决办法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">这句话的意思是将IE浏览器默认的渲染方式设为电脑上所装IE浏览器的最高标准，比如我电脑上装了IE10和IE8两个浏览器，如果我用IE8浏览器打开这个页面，会以IE10 的标准来渲染页面。
如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。
三、media 参数
- width:浏览器可视宽度。
- height:浏览器可视高度。
- device-width:设备屏幕的宽度。
- device-height:设备屏幕的高度。
- orientation:检测设备目前处于横向还是纵向状态。
- aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
- device-aspect-ratio:检测设备的宽度和高度的比例。
- color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
- color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
- monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
- resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
- grid：检测输出的设备是网格的还是位图设备。
四、设置不同视图的样式
设置样式响应式布局样式尽量与默认样式分开，方便修改
<link href="/templates/default/media.css" rel="stylesheet" />响应式样式的引用（根据条件（分辨率大小）引用）
<link href="/templates/default/css/style.css" rel="stylesheet" />默认样式的引用
css样式的书写方式：
@media screen and (max-width: 1400px) {}
@media screen and (max-width: 1920px)and (min-width: 1200px) {}
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
等.......
