1 响应式布局概述
响应式网页设计（Response Web Design）能够使网站针对不同的设备环境进行响应和调整，实现同一页面同对包括PC和手机在内的多种终端设备的兼容，在当前的移动化时代其应用价值逐渐显现。
响应式布局的优点：
- 面对不同分辨率
- 设备灵活性强
- 能够快捷解决多设备显示适应问题
响应式布局的缺点： - 兼容各设备工作量大，效率低
- 代码累赘，会出现隐藏无用的元素，加载事件加长
- 一定程序上改变了网站原有的布局结构，会出现用户混淆的情况
2 响应式布局关键技术
响应式设计整合了媒体查询、弹性视觉媒体和流动布局，媒体查询实现按设备特性来分级控制页面布局，弹性视觉媒体实现视觉媒体按照特定布局的动态调整，使用流动布局能创建可缩放、可流动的弹性版式，三者构成了响应式设计的核心技术。
2.1 媒体查询
CSS3中加入了媒体查询模块，该模块允许添加媒体类型和一个或多个检测媒体特性组成的条件表达式。CSS3中定义的媒体特性共有13种。响应式Web设计媒体查询中常检测的媒体特性是width，设定视口宽度的级数取决于用户群体终端设备碎片化程度和视觉设计需求，Web设计需为不同的终端级别定制相适应的样式。例：
@meta screen and (max-width:480px;){
/* 视口宽度小于480px适用 */
}
@meta screen and (min-width:480px) and (max-width:768px;){
/* 视口宽度大于480px但小于768px适用 */
}
@meta screen and (max-width:960px;){
/* 视口宽度960px以下适用 */
}
@meta screen and (min-width:1420px;){
/* 视口宽度1420px以上适用 */
}
目前，移动终端浏览器一般能比较好支持CSS3，不需要考虑响应式布局的媒体查询兼容问题，为实现IE9以下的浏览器媒体查询兼容性，需要在页面中插入CSS3-mediaqueries.js文件调用，代码如下：
<!-- [ if It IE9 ] >
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
2.2 流动布局
流体布局，也被成为流体布局，主体部分都是用百分比宽度，因此可以自适就用户的分辨率和不同的设备。如下：
2.3 弹性视觉媒体
视觉媒体主要指文本、图形、图像、动画和视频等可视媒体。弹性视觉媒体设计的本质是确保视觉媒体适应版式布局的变化，确保页面上媒体的可读性。
