响应式布局

视口设置：

<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
在这里我们可以根据不同的设备载入不同的CSS样式表

媒介查询：
通过CSS3中的Media Query来实现，即媒介查询。

<link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="css/gt-960px.css">
当页面宽度大于等于960px时，载入样式表gt-960px.css


<link rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:960px)" href="css/gt-600px-lt-960px.css">
当页面宽度大于等于600px且小于等于960px时，载入样式表gt-600px-lt-960px.css


<link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="css/lt-600px.css">
当页面宽度小于等于600px时，载入样式表lt-600px.css


样式表中内嵌法
@media screen and (min-width:960px){


}

媒介类型有：screen、print、handheld、all

屏幕条件有：width、height、device-width、device-height、orientation屏幕方向（landscape横屏、portrait竖屏）、resolution（像素密度 dpi）、device-pixel-ratio（缩放比dpr）

弹性图片：
我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。

兼容：

IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

通过CSS3中的Media Query来实现，即媒介查询。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。