Responsive设计——meta标签
最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。
个meta标签被称为可视区域meta标签，其使用方法如下。
<meta name=”viewport” content=”” />
在content属性中主要包括以下属性值，用来处理可视区域。
| content属性值 | 详细描述 |
| width | 可视区域的宽度，其值可以是一个具体数字或关键词divice-width |
| height | 可视区域的高度，其值可以是一个具体数字或关键词device-height |
| initial-scale | 页面首次被显示时可视区域的缩放级别，取值为1.0时将使页面按实际尺寸显示，无任何缩放。 |
| minimun-scale | 可视区域的最小缩放级别，表示用户可以将页面缩小的成都，取值为1.0时将禁止用户缩小至实际尺寸以下。 |
| maximun-scale | 可视区域的最大缩放级别，表示用户可以将页面放大的程度，取值为1.0时将禁止用户放大至实际尺寸以上。 |
| user-scale | 指定用户是否可以对页面进行缩放，设置为yes将允许缩放，no为禁止缩放。 |
在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
另外一点，由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。
下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。
脚本下载地址：
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>
