Internet Explorer 10+媒体查询和响应断点 [英] Internet Explorer 10+ media queries and responsive break points

问题描述

我正在尝试将特定于IE10 +的媒体查询与最大宽度的页面断点结合在一起.

I am trying to combine an IE10+ specific media query with a max-width page break point.

我很确定他们可以合并，但是不确定如何做.

I am pretty sure they can be combined but am not sure how to do it.

这是原始的仅限IE10 +的CSS媒体查询:

Here is the original IE10+ only css media query:

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

这是我将它们结合起来的微不足道的尝试:

Here is my feeble attempt at combining them:

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

此处仅IE的代码可以正常工作，但是"max-width"根本不起作用.

The IE only code here works fine, however the "max-width" doesn't work at all.

感谢您的帮助！

推荐答案

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

It works if you do it like this: repeat all the parts of the media query selector.

.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中使用.

Disclaimer: I don't have IE10 here, only IE11, but I'm reasonably sure it will work in IE10 as well.

这篇关于Internet Explorer 10+媒体查询和响应断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！