随着移动产品的日益丰富，出现了各种屏幕尺寸的手机，Pad等移动设备。如果针对每一种尺寸的设备都独立开发一个网站，成本会非常高，这时，响应式Web设计应运而生，响应式网页设计指的是网页设计应该根据设备环境（屏幕尺寸，屏幕定向，系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。

6.6.1响应式Web设计的概念

响应式网页设计是目前流行的一种网页设计形式，主要特色是页面布局能根据不同设备（平板，PC，手机）让内容适应性的展示，让用户能在不同设备都能够友好地浏览网页内容。从而为不同终端的用户提供更加舒适的界面和更好的用户体验。

6.6.2响应式Web设计相关技术

响应式Web设计是和HTML5+CSS3互相配合与支持的，实现响应式设计包括以下技术点：

1)  HTML5+CSS3的基本网页设计。

2)  视口(meta)：提供可以配置视口的属性。

3)  CSS媒体查询 (Media Queries)：识别媒体类型，特征（屏幕宽度，像素比等）。

4)  流式布局(Fluid Layout)：可以根据浏览器的宽度和屏幕的大小自动调整效果。

5)  流式图片(Fluid Images)：随流失布局进行相应缩放，可以理解为图片的流式布局

6)  响应式栅格系统：依赖于媒体查询，根据不同的屏幕大小调整布局。

7)  弹性盒布局：CSS3的弹性盒布局，一个可以告别浮动，完美地实现垂直居中的新特性。

8)  弹性图片：指的是不给图片设置固定尺寸，而是通过设置img{max-width:100%},让图片大小自动适应屏幕大小。

实现响应式Web设计，可以说就是根据显示屏幕大小的变化控制页面的文档流，适配不同类型的终端显示设备。