2

我在使用 IE9 桌面的 @media 查询时遇到问题。我创建了一个网站，当有人缩小浏览器的大小时，整个布局会根据“屏幕”大小而变化。整个布局会更改以适应屏幕尺寸。

然而，当谈到桌面上的 IE9 时，什么都没有发生。出现原始布局（专为 1024 分辨率构建）。所以任何说 768 屏幕尺寸（或更低）的人都会看到布局“流血”。IT 不会为他们改变。

该网站可在 Chorme、Firefox 甚至 Opera 中使用，但在 IE9 桌面版中无法使用

这是我的呼吁：

@media screen and (min-width: 768px) and (max-width: 959px){
bunch of settings
}

@media screen and (min-width: 480px) and (max-width: 767px){
bunch of settings
}

@media screen and (max-width: 320px) {
bunch of settings
}

^^^ 当我缩小浏览器大小时，IE9 无法识别这些。

请帮忙。

4

2 回答 2

1

从 IE9 开始支持 CSS3 媒体查询，因此您的媒体查询应该可以工作。我的直接猜测是您打开了兼容性视图，将其关闭，您的媒体查询应该可以工作。

我将您的最终媒体查询更新为：

@media screen and (max-width: 479px) {
    bunch of settings
}

我的猜测是，当您调整 ie9 浏览器的大小时，它永远不会达到 320 的最大宽度。它被卡在 320 到 480 之间的某个位置，这意味着您的媒体查询设置都没有得到满足 - 因此它默认为 1024。将最大宽度更改为仅比先前视口的最小值 (480-1 = 479) 低一个，将解决此问题。

要么，要么在ie9无法识别但其他浏览器没有问题的查询中您的规则中一定存在一些问题。

于 2012-07-06T14:54:43.860 回答
-1

IE9 确实支持媒体查询。切换订单轮次，它们应该可以工作。

@media screen and (max-width: 320px) {
   bunch of settings
}

@media screen and (min-width: 480px) and (max-width: 767px){
   bunch of settings
}

@media screen and (min-width: 768px) and (max-width: 959px){
   bunch of settings
}
于 2012-07-06T14:58:56.773 回答