如何在带有响应JS的IE8中应用2个媒体查询？

Question

所有代码都可以在IE9 +中正常工作。

这在IE8中使用response.js起作用：

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
  // Code
}

这不是：

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), 
(min-resolution: 192dpi) and (min-width: 700px){
  // Code
}

有谁知道将媒体查询传递给IE8的另一种方法？

Answer 1

好吧，也许我把它弄错了，但是您正在指定-webkit-stuff 和其他宽度查询。

我不相信ie会-webkit- 不足，但是会错误地理解最小分辨率。

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), 
(min-resolution: 192dpi) and (min-width: 700px){
  // Code
}

毫无疑问，我的意思是，我发现的所有内容尚不清楚，并且由于您使用的是response.js，因此可能会被强制执行。 我在response.js guihub上发现了一些东西，作为与其他问题的重复

仅通过媒体查询定位IE8：

@media \0screen {
    .your-css { background: blue; }
}

要排除IE8，请仅使用条件注释：

<!--[if !IE 8]> 
   @media queries for all browsers except IE 8
<![endif]-->

Answer 2

发生问题是因为如Milky所建议，IE8无法识别-webkit- 。

但是，它并没有完全忽略查询，而是读取并应用了min-width查询，从而应用了用于更高分辨率显示的代码。

解决方法是从IE8中完全排除min-resolution查询。

http://browserhacks.com/为此提供了一个很好的仓库。 我最终使用的代码是：

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: @screen-md-min), 
(min-resolution: 192dpi) and (min-width: @screen-md-min){
    :root * > .selector { 
// code
  }
}