Question

IE11忽略我的媒体查询并始终使用移动广告。

奇怪的是，如果我改变浏览器宽度，即使只有1-2个像素，浏览器也会自动呈现并显示媒体查询。

我试过css lint，我的css没有错误。

我的css没什么特别的。就像这样简单的css：

.div_example{
  width: 100px;
}

@media (min-width: 768px){
  .div_example{
    width: 300px;
  }
}

有没有人遇到过这个问题？

Answer 1

发生这种确切的事情。就像您一样，如果调整窗口大小，媒体查询似乎会启动。很难调试，因为打开停靠在窗口上的开发人员控制台也会导致调整大小，并且一切看起来都很好。将开发者控制台切换到单独的窗口后，我可以在DOM资源管理器中看到没有应用媒体查询。

最终，我找到了媒体查询，该媒体查询位于主体而不是头部的样式块内。将样式块重新定位到头部可以使IE11正确地应用媒体查询。

身体样式，因此不足为奇。

Answer 2

您必须定义屏幕类型，例如......

Answer 3

今天通过IE11解决了这个问题。最小和最大宽度的媒体查询未应用。但是，正在应用基于固定大小或其他属性（例如-ms-high-contrast: none）的媒体查询块。

修正是要添加only screen，因为all也不起作用。

不起作用

@media (min-width: 1000px){ ... }
@media all and (min-width: 1000px) { ... }

可以工作

@media only screen and (min-width: 1000px) { ... }

那些应该是完全相同的，我不知道为什么一个可行而另一个却不可行，但是也许这会让别人头疼。

Answer 4

它总是使用移动样式，因为您正在使用：

@media (min-width: 768px)

如果您的窗口宽度超过768px，则此条件为真，请尝试：

@media (max-width: 768px)

当窗口宽度小于768px时，将应用该媒体查询中的样式，这可能是您想要实现的。