Question

在我的样式表中，我有3行根据屏幕分辨率调整字体大小。除IE之外，它在所有浏览器中都能完美运行（我测试了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;}

我该如何解决这个问题？是否有一个黑客，脚本，插件，我可以添加，使其在IE中工作？感谢

Answer 1

IE 8及以下版本不了解媒体查询。您可以在HTML中使用注释，使样式表仅对IE可见。请参阅此页面以获取解释：http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

例如：

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

在下面的示例中，媒体查询为一个样式表提供最大480px宽的屏幕，另一个用于屏幕481或更大的屏幕。它为IE 8或更低版本的用户提供相同的样式表：

<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]-->

Answer 2

在IE9之前，Internet Explorer不支持它们。

Scott Hanselman有一个关于媒体查询和渐进增强的好故事。

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

Answer 3

当然它忽略了它们，直到IE9，没有媒体查询支持。

Answer 4

如果您正在寻找一个jQuery解决方案来解决IE旧版浏览器的这个问题，这里有一个很好的资源。

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

希望这会有所帮助

Answer 5

当然，看看Respond。我已经使用它几次将此功能扩展到较旧的IE。

https://github.com/scottjehl/Respond

样式表中的@media被IE忽略了

5 个答案: