Internet Explorer 10+ 媒体查询和响应式断点

Question

我正在尝试将 IE10+ 特定媒体查询与最大宽度分页断点结合起来。

我很确定它们可以组合，但不知道该怎么做。

这是原始的 IE10+ 唯一的 css 媒体查询：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS styles go here */
   }

这是我将它们组合起来的微弱尝试：

@media (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (max-width: 950px) {
    /* IE10+ CSS styles go here */ 
    }

这里只有 IE 的代码可以正常工作，但是“max-width”根本不起作用。

感谢您的帮助！

Answer 1

如果你这样做，它会起作用：重复媒体查询选择器的所有部分。

.For.IE.only {
  display: none
}

@media all and (-ms-high-contrast: active) and (max-width: 950px),
       all and (-ms-high-contrast: none) and (max-width: 950px) {
  .For.IE.only {
    display: block
  }
}

<div class="For IE only">
  This is for IE only, and only on narrow screens
</div>
<div>
  This is for all browsers
</div>

免责声明：我这里没有 IE10，只有 IE11，但我有理由确定它也可以在 IE10 中使用。