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

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