67. CSS3 Responsive设计之meta标签

最后还有一个不可或缺的东东，那就是meta 标签，可以说，在响应式设计中如果没有这个meta 标签，你就是蹩脚的，响应式设计就是空谈。

meta 标签被称为可视区域 meta 标签，其使用方法如下:

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

在 content 属性中主要包括以下属性值，用来处理可视区域。

在实际项目中，为了让 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]>
    <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
​<![endif]>

以上关于67. CSS3 Responsive设计之meta标签的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。