67. CSS3 Responsive设计之meta标签

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

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

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

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

CSS3 Responsive设计之meta标签

在实际项目中,为了让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]>

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 67. CSS3 Responsive设计之meta标签

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们