媒体查询在 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 之后，我正在调用 response.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 rel="stylesheet" href="/public/demo.css" />

并取出only关键字，改为min-width。

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

应该这样做。