0元购京东自营斐讯K2路由器返399元活动
置顶

WordPress 主题 增加 CSS3 Media Queries 代码

作者:     目录: 小代码     发表: 2011年10月27日

昨天抽时间在 style.css 中增加了 CSS3 Media Queries代码,并且修正了此主题在IE6中的bug(HTML5)问题,目前此主题在IE6中浏览效果良好。

当页面宽度小于640px时,页面样式如下:

WordPress 主题 增加 CSS3 Media Queries 代码

默认页面宽度是980px,当页面宽度小于640px时,页面布局会自动切换到 手机浏览模式(宽度320px),能够很好的适应手机屏幕。

CSS3 Media Queries 代码编写示例:

/* media queries mobile */
@media screen and (max-width: 640px) {
/* 在这里重新定义 手机页面的布局样式 */
}

为让IE浏览器支持HTML5和CSS3,需增加下面的代码

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

发表评论

电子邮件地址不会被公开。 必填项已用*标注