[英]How can I apply 2 media queries in IE8 with respond JS?
All the code works fine in IE9+. 所有代码都可以在IE9 +中正常工作。
This works in IE8 using respond.js : 这在IE8中使用response.js起作用:
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
// Code
}
This does not: 这不是:
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
(min-resolution: 192dpi) and (min-width: 700px){
// Code
}
Does anyone know another way to pass the media query to IE8? 有谁知道将媒体查询传递给IE8的另一种方法?
Well, maybe i got it all wrong but you are specifying -webkit-stuff AND other width queries. 好吧,也许我把它弄错了,但是您正在指定-webkit-stuff 和其他宽度查询。
I don't believe ie will understant -webkit- but can buggyly understand min-resolution. 我不相信ie会-webkit- 不足,但是会错误地理解最小分辨率。
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
(min-resolution: 192dpi) and (min-width: 700px){
// Code
}
By buggyly, i mean, all i found is not clear, and because you are using respond.js, it might be forced. 毫无疑问,我的意思是,我发现的所有内容尚不清楚,并且由于您使用的是response.js,因此可能会被强制执行。 I found something on respond.js guihub as a duplication of this other issue
我在response.js guihub上发现了一些东西,作为与其他问题的重复
To target IE8 only via media query : 仅通过媒体查询定位IE8:
@media \0screen {
.your-css { background: blue; }
}
To exclude IE8 only use a condition comment : 要排除IE8,请仅使用条件注释:
<!--[if !IE 8]>
@media queries for all browsers except IE 8
<![endif]-->
The problem occurs because as Milky suggests, IE8 does not recognise -webkit-
. 发生问题是因为如Milky所建议,IE8无法识别
-webkit-
。
However, rather than ignoring the query completely, it still reads and applies the min-width
query, thereby applying code that is meant for displays with higher resolution. 但是,它并没有完全忽略查询,而是读取并应用了
min-width
查询,从而应用了用于更高分辨率显示的代码。
The fix is to exclude the min-resolution
query from IE8 altogether. 解决方法是从IE8中完全排除
min-resolution
查询。
http://browserhacks.com/ provides a great repo for this. http://browserhacks.com/为此提供了一个很好的仓库。 The code I ended up using was:
我最终使用的代码是:
@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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.