媒体查询无法在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 rel="stylesheet" href="/public/demo.css" />

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

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

那应该这样做。