CSS3 Media Query for IE7 and IE8

Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support for CSS3 Media Query and that is very important for cross-browser responsive web design. Here I will tell you how you can solve the CSS3 Media Query issues for IE. This tutorial will helps you to create a dynamic resolution dependent layout with web standards in mind.

Today I got a great jQuery plugin Link name css3-mediaqueries. It is very easy to use.

How to use?

Download jQuery plugin form Here and include downloaded script just before </body> like

<script src="js/css3-mediaqueries.js"></script>
Or you can use following way to include the script.

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

Then write the media query in style sheet and check it in IE. It will work nicely with IE8, IE7 Even more older version IE6 or IE5

Notes:

It doesn’t work on @import’ed stylesheets Write media query with following way

@media screen and (min-width: 980px) {
/* CSS Document */
}