响应式设计是指通过设计，可以让网页在不同的设备中展现不同的设计风格，使设计适用于多样化的终端设备。

响应式设计既要考虑元素布局的秩序，又要做到“积极响应”，需要满足3个条件：

• 网站必须建立灵活的网格基础，即弹性网格布局。

• 引用到网站上的图片必须是可伸缩的。

• 需要在媒体特性上设置不同的样式。
  

1、流体网格

对每个网格格子使用百分比单位来控制其大小，让网格大小随时可以根据屏幕尺寸做出相对应的比例缩放。

2、弹性图片

不给图片设置固定尺寸，使用百分比设定，例如：

img { max-width:100%;}

3、媒体查询

通过媒体特性，媒体查询可以根据设备的尺寸，查询出适配的样式，实现特定的页面风格。

4、屏幕分辨率

利用媒体特性，针对设备或浏览器使用的分辨率来适配对应的css样式。

5、主要断点

即设备宽度的临界点，当达到断点时，调整对应的样式。在媒体特性中，min-width和max-width对应的属性值就是响应式设计中的断点值。

实现响应式设计要尽量使页面保持简单，一些技巧如下：

• 尽量少用不重要的div。

• 不要使用内联元素。

• 尽量少用JS或Flash。

• 尽量不用绝对定位和浮动样式。

• 不使用冗余结构。

• 设置重置样式（reset.css）。

• 实现一个简单的有语义的核心布局。
  

响应式设计在用于智能手机等设备时可能会失效，原因是许多设备使用了一个比实际屏幕尺寸大很多的虚拟可视区域，以避免特定情况下图像变形。这时，可以使用meta标签来解决这个问题。

meta标签可以通过定义界面的可视区域尺寸和缩放级别，让智能手机等设备对浏览的网页进行优化。其语法为：

<meta name="viewport" content="" />

其中，content的属性值用于处理可视区域，主要包括以下内容：

下面以上一个示例：

<meta name="viewport" content="width=device-width,initial-scale=1.0" />