如何创建非嵌套IE11媒体查询？大屏-ms-grid适配失效排查

嘿，我完全懂你现在的困扰——这个媒体查询的逻辑组合搞错啦！

你原来的写法：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (min-width:767px){

这里的逗号代表逻辑或的关系，也就是说只要满足三个条件中的任意一个，整个媒体查询就会生效。所以哪怕屏幕宽度小于767px，只要是IE11（满足前两个高对比度条件之一），里面的-ms-grid样式就会一直生效，自然不会随屏幕尺寸关闭。

正确的写法应该是这样的： #

我们需要把IE11的识别条件和屏幕宽度条件用逻辑与结合起来，确保只有同时满足「是IE11」和「屏幕宽度≥767px」这两个条件时，样式才会生效。有两种写法都可以：

写法一（更直观，兼容性更稳妥）：

@media all and (-ms-high-contrast: none) and (min-width: 767px),
       all and (-ms-high-contrast: active) and (min-width: 767px) {
  /* 这里写你的-ms-grid相关样式 */
}

写法二（用括号简化逻辑）：

@media all and ((-ms-high-contrast: none) or (-ms-high-contrast: active)) and (min-width: 767px) {
  /* 这里写你的-ms-grid相关样式 */
}

为什么这样有效？ #

这两种写法都明确了：只有当浏览器是IE11（通过高对比度属性识别）并且屏幕宽度超过767px时，媒体查询内的样式才会被应用。当你把屏幕缩小到767px以下时，第二个条件不满足，整个媒体查询就会失效，-ms-grid样式也就自动关闭了。

你可以在IE11里调整窗口大小，打开开发者工具查看元素的计算样式，确认-ms-grid相关属性在窄屏时是否消失，这样就能验证是否生效啦。

内容的提问来源于stack exchange，提问作者Jussi Mäki