ie11 不应用媒体查询样式答案

【问题标题】：Ie11 doesn't apply media queries styleie11 不应用媒体查询样式
【发布时间】：2020-08-07 00:33:56
【问题描述】：

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

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

我尝试了 css lint，但我的 css 中没有错误。

我的 CSS 没有什么特别之处。像这样的普通CSS：

.div_example{
  width: 100px;
}

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

有人遇到过这个问题吗？

【问题讨论】：

将@media (min-width: 768px) 更改为@media all and (min-width: 768px) 或@media only screen and (min-width: 768px)
谢谢。但我忘了在我的问题中提到我也尝试了@media all，但它没有用。
仅 IE11 不工作？
正确。所有其他浏览器都可以。
您是否在 HTML 的标头中使用元视口和 width=device-width？

【解决方案1】：

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

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

IE11 (Using <style> tags in the <body> with other HTML) 不支持正文中的样式，因此会有一些奇怪之处也就不足为奇了。

【讨论】：

【解决方案2】：

今天用 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) { ... }

这些应该完全相同，我不知道为什么一个有效而另一个无效，但也许这会让其他人头疼。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

@media (min-width: 768px)

如果您的窗口宽度超过 768 像素，此条件将成立，试试这个：

@media (max-width: 768px)

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

【讨论】：