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
}

@Media查询IE9桌面浏览器

2 个答案: