IE9 桌面浏览器的@Media 查询

Question

我在处理 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 无法识别这些内容。

请帮忙。

Answer 1

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

---

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

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

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

要么这样，要么你的规则中一定有一些问题，ie9 无法识别但其他浏览器没有问题。

Answer 2

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
}