2

这是我第一次尝试开发响应式网站。它在除 IE9 之外的所有浏览器中都可以正常工作。我知道 IE9 与媒体查询兼容。我检查了兼容性模式是否已关闭并且我没有看到可见的图标，所以我相信它是。我的媒体查询列在基本样式下方。我将在下面粘贴一些媒体查询，以免超出任何字符限制。如果您需要查看更多信息，请告诉我。注意：文档类型适用于 html5。

媒体查询：

@media only screen and (max-width: 479px) {
  /* 320 =================================================== */

  header .logo a {
    background:url(../images/logo-320.png) no-repeat;
    width:213px;
    height:69px;
    float:left;
    margin-top:35px;
    display:block;
}

}

@media only screen and (max-width: 480px) {
    header {min-width:100%;}

    .main-link-wrap {
    width:100%;
    margin:0 auto;
}

    .featured-prod {
        width:100%; 
    }

    footer {
        min-width:100%;
}

}

@media only screen and (min-width: 480px) {
  /* 480 =================================================== */

    header .logo a {
    background:url(../images/logo-480.png) no-repeat;
    width:310px;
    height:94px;
    float:left;
    margin-top:5px;
    display:block;
}

.featured-prod .product-box {
    width:185px;    
    margin-left:1.8%;
    margin-right:1.8%;
    text-align:left;
    color:#282828;
    font-size:12px;
    font-size:1.2rem;
    line-height:13px;
    float:left;
}

footer .address {
    font-size:22px;
    line-height:32px;   
}

}
4

2 回答 2

1

用一个非常简单的 html5 页面进行了测试。 

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
</body>
</html>

引用了您的样式表。添加

身体{背景：#F00;}

到第一个查询和

身体{背景：#00F;}

到第二个查询。

在 IE9 中调整大小时，背景从红色变为蓝色，这表明媒体查询正在工作。我建议尝试将相同的内容添加到您的页面以证明媒体查询。

如果背景按预期更改，那么您的 CSS 有其他问题（例如，它是否针对正确的元素；是否是另一种样式覆盖等）

如果背景没有改变，那么您的页面中发生了一些不寻常的事情，或者与兼容性等有关。

于 2012-08-06T21:14:56.470 回答
0

您使用max-width: 479px和max-width: 480px媒体查询有什么原因吗？我假设您没有在max-width: 479px块中看到任何样式？这是因为这些规则被您的max-width:480px规则覆盖。

这就是为什么，如果浏览器是 320px 宽 - 这意味着它小于 479px 的最大宽度，但它也小于 480px（两个条件都满足）。而且因为您在它覆盖了这些规则max-width: 480px之后就获得了障碍。max-width:479px我的建议是让您将规则包含在max-width: 480px您的max-width: 479px块中，反之亦然。

作为一个仅供参考，这个问题不是 IE9 特有的——在这个意义上安排你的 CSS 规则将在所有浏览器中表现相同。

于 2012-08-08T03:18:55.990 回答