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

我的站点由5个div组成（用绿色框表示）。应该有 每行3个，您可以在此处查看我的演示站点：

IE8不支持媒体查询，但我使用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（正确）：

怎么了？？谢谢你的帮助

设置视口

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

---

这应该可以做到。

谢谢Ryan，不过我仍然有问题：我更新了我的演示代码，包括@media only screen和（最小宽度：773px）和（最大宽度：1320px）{.block{style HERE****}和@media only screen和（最小宽度：10px）以及（最大宽度：772px）{.block{style HERE style HERE}但IE8仍然没有响应。。。您可以查看我的演示源代码，以确保我已正确更改了它。非常感谢从

标记下面去掉“s”，然后尝试使用最小宽度更改代码，但仍然不起作用。我现在对block的唯一媒体查询是@media only screen和（最小宽度：773px）{.block{width:45%；边距：0 15px；边距底部：30px；最小高度：670px；最大高度：670px；溢出：隐藏；-webkit边框半径：5px；-moz边框半径：5px；边框半径：5px；/*边框：1px纯红；*/} } .. 但它仍然只在IE8中没有响应。以下是IE8的屏幕截图：。这是IE9：这似乎有效，Ryan。谢谢你，伙计。唯一的问题是，它似乎将最小的媒体查询应用于所有视口大小。最小的媒体查询是针对10px、@media-screen和（最小宽度：10px）{.block{width:100%；}但我也包括了（at）media-screen和（最小宽度：402px）{.block{width:45%；}在它上面，似乎被10px媒体查询压倒了。我如何调整代码以允许变化？在大视口中，我需要每行3个div。中等视口中，我需要每行2个div。小视口，每行1个。

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

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