怎样实现响应式布局？
对于这个问题，我们可以通过CSS3中的Media Query来实现，即媒介查询。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于"。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
首先我们要允许网页宽度自动调整
在网页代码的头部，加入一行viewport元标签：
<meta name="viewport" content="width=device-width, initial-scale=1" />
下面通过Media Query我们可以得到不同设备屏幕的宽和高，从而我们就可以分别处理了。根据不同的设备屏幕宽度，设置不同的CSS。那么这里有两种方法：
1、外联样式表
在这里我们可以根据不同的设备载入不同的CSS样式表
<linkrel="stylesheet"type="text/css"media="screen and (min-width:960px)"href="css/gt-960px.css">
当页面宽度大于等于960px时，载入样式表gt-960px.css
<linkrel="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
<linkrel="stylesheet"type="text/css"media="screen and (max-width:600px)"href="css/lt-600px.css">
当页面宽度小于等于600px时，载入样式表lt-600px.css
2、样式表中内嵌法
当页面宽度大于等于960px时
@media screenand (min-width:960px){.header,.container,.footer{width:960px;}.sidebarLeft,.main,.sidebarRight{float:left;height:400px;}...}
当页面宽度大于等于600px且小于等于960px时
@media screenand (min-width:600px) and (max-width:960px){.header,.container,.footer{width:600px;}.sidebarLeft,.main{float:left;height:400px;}...}
当页面宽度小于等于600px时
@media screenand (max-width:600px){.header,.container,.footer{width:400px;}.sidebarLeft,.sidebarRight{width:400px;height:100px;}...}
弹性图片
我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。
img {max-width: 100%;height: auto;width: auto9; /* ie8 */}
