媒体查询在 IE8 中不起作用 - 即使使用 respond.js 解决方法

Question

我的网站由 5 个 div 组成（用绿色框表示）。应该有每行 3 个，您可以在此处查看我的演示站点：http://testsite24.netai.net/public/demo.html

IE 8 不支持媒体查询，但我使用 respond.js 作为解决方法。但是我无法让它工作。

我使用的媒体查询是：

@media screen and (max-width: 1320px){

.block{
    width: 45%;    
    margin: 0 15px;
    margin-bottom: 30px;
    min-height: 670px;
    max-height: 670px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;    
/*    border: 1px solid red;*/
}
   }
        @media screen and (max-width: 772px){

    .block{
    width: 100%;    
    margin: 0 15px;
    margin-bottom: 30px;
    min-height: 710px;
    max-height: 710px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;    
/*    border: 1px solid red;*/
}
    }

其中 .block 适用于绿色 div 框。这些在 IE8 中工作正常。

在我的 css 之后，我正在 respond.js 上拜访，就在像这样的标签之前：

<script src="http://testsite24.netai.net/public/js/respond.js" type="text/javascript"></script>

但是当我在 IE 8 中查看页面时，它没有响应查询，

这是在 IE8 中的截图：

这是一个用于 IE 9 的（正确）：

怎么了？？感谢您的帮助！

Answer 1

设置视口。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

将 css 放入外部文件并 link 到它。

<link rel="stylesheet" href="/public/demo.css" />

并把only关键字去掉，改成min-width。

@media screen 
and (min-width : 773px) { 
    //instead of (max-width:1320px)
}

这样就可以了。

媒体查询在 IE8 中不起作用 - 即使使用 respond.js 解决方法

Media queries not working in IE8 - even with respond.js work-around

html

javascript

css

internet-explorer-8

media-queries