IE 忽略样式表中的 @media答案

【问题标题】：@media in stylesheet ignored by IEIE 忽略样式表中的 @media
【发布时间】：2012-12-18 23:56:20
【问题描述】：

在我的样式表中，我有这 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;}

我该如何解决这个问题？是否有我可以添加的 hack、脚本、插件使其在 IE 中工作？谢谢

【问题讨论】：

标签： css media-queries

【解决方案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]-->

在下面的示例中，媒体查询将一个样式表提供给最大 480 像素宽的屏幕，另一个用于 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]-->

【讨论】：

【解决方案2】：

Internet Explorer 直到 IE9 才支持它们。

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

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

【讨论】：