javascript - 如何正确编写媒体查询以在 IE 中使用一个样式表而在所有其他浏览器中使用另一个样式表？

Question

如何正确编写媒体查询以在 IE 中使用一个样式表而在所有其他浏览器中使用另一个样式表？我正在试验媒体查询，IE 检测似乎对 @media 屏幕工作正常，就像这个例子一样:

@media screen{

.myDiv{
color:green;
}

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.myDiv{
color:purple;
}

}

<div class="myDiv">
This should be purple in ie.
</div>

但是，当我尝试编写等效的@media 打印查询时，结果会立即显示在屏幕上，如下所示:

@media screen{

.myDiv{
color:green;
}

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.myDiv{
color:purple;
}

}


@media print{

.myDiv{
color:black;
}

}

@media print and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.myDiv{
color: red;
}

}

<div class="myDiv">
This should be purple on an ie screen and red when printed from ie. In chrome the text should be green on the screen and black when printed.
</div>

如何正确编写媒体查询以在 IE 中使用一个样式表而在所有其他浏览器中使用另一个样式表？

Answer 1

如果你想使用多个条件，你应该使用 and 或 or between then:

@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none)

@media screen{

.myDiv{
color:green;
}

}

@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) {

.myDiv{
color:purple;
}

}


@media print{

.myDiv{
color:black;
}

}

@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none) {

.myDiv{
color: red;
}

}

<div class="myDiv">
This should be purple on an ie screen and red when printed from ie. In chrome the text should be green on the screen and black when printed.
</div>