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

问题描述

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

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

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

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {/* IE10+ CSS 样式放在这里 */}

这是我将它们结合起来的微弱尝试:

@media (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (max-width: 950px) {/* IE10+ CSS 样式放在这里 */}

IE 唯一的代码在这里工作正常，但是max-width"根本不起作用.

感谢您的帮助！

解决方案

如果你这样做是有效的:重复媒体查询选择器的所有部分.

.For.IE.only {显示:无}@media all and (-ms-high-contrast: active) and (max-width: 950px),全部和(-ms-high-contrast:无)和(最大宽度:950px){.For.IE.only {显示:块}}

这仅适用于 IE，并且仅适用于窄屏
<div>这适用于所有浏览器

免责声明:我这里没有 IE10，只有 IE11，但我有理由相信它也可以在 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.

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 */ 
    }

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

Thanks for any help!

解决方案

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.

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