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
精彩评论