@media in stylesheet ignored by IE

At the biginning of my stylesheet, I hav开发者_JAVA百科e those 3 lines that adjust the font-size depending of the sreen resolution. It work perfectly in all browsers except IE (I tested IE7-8).

@media screen and (min-width: 0px) and (max-width: 1199px){html, body{font-size:8px;}}
@media screen and (min-width: 1200px) and (max-width: 1499px){html, body{font-size:9.5px;}}
@media screen and (min-width: 1500px){html, body{font-size:11px;} 

how can i resolve this problem? Is there an hack, script, pluggin i can add to make it work in IE ? Thanks

IE 8 and below don't understand media queries. You can use a comment in your HTML to make a stylesheet visible to only IE. See this page for an explanation: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Eg:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<![endif]-->

In the below example, a media query serves one stylesheet to screens up to 480px wide, and another for screens 481 or larger. It serves the same stylesheet to users of IE 8 or below:

<link
    rel="stylesheet"
    type="text/css"
    media="screen and (max-device-width: 480px)" href="/css/style.css" />

<link
    rel="stylesheet"
    type="text/css"
    media="screen and (min-device-width: 481px)" href="/css/style.css"/>   

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<![endif]-->

Internet Explorer does not support them till IE9.

Scott Hanselman has a nice story about media queries and progressive enhancement.

http://www.hanselman.com/blog/LearningAboutProgressiveEnhancementSupportingMobileBrowsersWithCSS3MediaQueries.aspx

Of course it ignores them, until IE9, no media queries support is there.

If you're looking for a jQuery solution to solve this problem with older browsers of IE, here is a good resource.

http://www.protofunc.com/scripts/jquery/mediaqueries/

hope this helps

Sure, take a look at Respond. I've used it a couple of times to extend this functionality to the older IEs.

https://github.com/scottjehl/Respond