如何在IE8中应用2个媒体查询并回复JS？

Question

所有的代码在IE9 +中都能正常工作。

此使用respond.js工作在IE8：

@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 和其他宽度查询。

我不相信即将理解-webkit-但可以buggyly理解最小分辨率。

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

通过buggyly，我的意思是，我所发现的是不明确的，因为你是使用respond.js，它可能会被迫。我found something on respond.js guihub为duplication of this other issue

要只通过媒体查询针对IE8：

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

要排除IE8只使用一个条件注释：因为银河表明

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

Answer 2

出现该问题，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 
    } 
}