Internet Explorer 10+ media queries and responsive break points

Question

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.

Answer 1

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>

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