css - IE 忽略样式表中的@media

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

在下面的示例中，媒体查询为一个样式表提供最大 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]-->