javascript - 在IE8中,即使使用 respond.js,媒体查询也不能工作

  显示原文与译文双语对照的内容
0 0

我的站点由 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的截图:

ie8

这里是 IE 9 ( 正确)的一个:

ie9

怎么了谢谢你的帮助? !

时间: 原作者:

0 0

设置 viewport 。


<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)
}

这样就可以了。

...