Medial Queries的另一用法——服务于IE

转载 (原文地址) pingfan 随笔 css3 853阅读 2014-08-19 17:23:39 举报

随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。这个早前在w3cplus已经介绍过,如果你还没有接触,不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法,就是利用@media来做一些IE下的特殊效果。

众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的。比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直接无视这些代码。今天我想为大家介绍的是使用@media实现IE hack的方法:

仅IE6和IE7识别
[code]@media screen\9 {
.selector { property: value; }
} [/code]

仅IE6和IE7、IE8识别
[code]@media \0screen\,screen\9 {
.selector { property: value; }
}[/code]

仅IE8识别
[code]@media \0screen {
.selector { property: value; }
}[/code]

仅IE8-10识别
[code]@media screen\0 {
.selector { property: value; }
}
[/code]
仅IE9和IE10识别
[code]@media screen and (min-width:0\0) {
.selector { property: value; }
} [/code]

仅IE10识别
[code]@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/ IE10-specific styles go here /
}[/code]

上面几个@media配合“\”、“\0”和“\9”就能让不同版本的IE识别,那么具体项目中我们要怎么使用呢?

打个比方,如果你的body中设置了一个红色的背景,而想让不同版本IE变成别的颜色,那么我们就可以这么操作

[code]body {
background: red;
}

/ IE6、IE7变成绿色 /
@media all\9 {
body {
background: green;
}
}

/ IE8变成蓝色 /
@media \0screen {
body {
background: blue;
}
}
/IE9和IE10变成黄色/
@media screen and (min-width:0\0) {
body {
background: yellow;
}
} [/code]

IE的Hack方法我向来不提倡使用,但这些方法很少有人知道,贴上来与大家分享,希望在不得已的情况之下,这些hack方法能帮你解决问题,特别是国内的苦逼前端人员。

资料来源:http://www.w3cplus.com/css3/moving-ie-specific-css-into-media-blocks

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复