Ie11 不應用媒體查詢樣式

Question

IE11 忽略我的媒體查詢並始終使用移動 css。

奇怪的是，如果我更改瀏覽器寬度，即使僅更改 1-2 像素，瀏覽器也會自行呈現並顯示媒體查詢。

我試過 css lint 並且我的 css 中沒有錯誤。

我的 css 沒有什么特別之處。 只是像這樣的普通 css：

.div_example{
  width: 100px;
}

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

有沒有人遇到過這個問題？

Answer 1

如果發生這種確切的事情。 就像你一樣，如果窗口被調整大小，媒體查詢似乎會啟動。很難調試，因為打開停靠在窗口的開發者控制台也會導致調整大小，一切看起來都很好。 將開發者控制台切換到單獨的窗口后，我可以在 DOM 資源管理器中看到媒體查詢沒有應用。

最終，我將其追蹤到位於正文而不是頭部的樣式塊內的媒體查詢。 將樣式塊重新定位到頭部使 IE11 正確應用媒體查詢。

IE11 不支持 body 中的樣式（將 <body> 中的 <style> 標簽與其他 HTML 一起使用），因此會有一些奇怪的東西也就不足為奇了。

Answer 2

今天在 IE11 上遇到了這個問題。 未應用最小和最大寬度媒體查詢。 但是，正在應用基於固定大小或其他屬性（如-ms-high-contrast: none ）的媒體查詢塊。

修復是only screen添加only screen因為all也all不起作用。

不起作用

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

行得通

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

這些應該是完全相同的，我不知道為什么一個有效而另一個無效，但也許這會讓其他人頭疼。

Answer 3

您必須定義屏幕類型，例如..

Answer 4

它始終使用移動樣式，因為您正在使用：

@media (min-width: 768px)

如果您的窗口寬度超過 768 像素，則此條件為真，請嘗試以下操作：

@media (max-width: 768px)

當窗口寬度小於 768px 時，將應用該媒體查詢中的樣式，這可能是您想要實現的。