日期:2014-05-17  浏览次数:20579 次

CSS3 Media QueryIE9前解决方法

对于CSS3 Media Query,IE9之前的版本无法提供支持。目前的最佳解决方法是通过css3-mediaqueries.js来帮助这些旧版本的IE浏览器支持CSS3 media queries。

?

使用代码如下:

?

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

?

?

css3-mediaqueries.js见附件

官方网站:

https://code.google.com/p/css3-mediaqueries-js/

接下来就可以写CSS3 Media Query样式代码了

/************************************************************************************
小于980
*************************************************************************************/
@media screen and (max-width: 980px) {

	/* pagewrap */
	#pagewrap {
		width: 95%;
	}

	/* content */
	#content {
		width: 60%;
		padding: 3% 4%;
	}

	/* sidebar */
	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		width: 100%;
		height: auto;
		min-height: 300px;
	}

}

/************************************************************************************
小于650
*************************************************************************************/
@media screen and (max-width: