媒体查询在IE8中不起作用-即使使用response.js也可以解决

Question

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

IE 8不支持媒体查询，但是我正在使用response.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)
}

那应该做到的。