IE8忽略媒体查询w/ respond.js

Question

尽管IE8支持Respond.js，但它似乎忽略了一些CSS媒体查询。我想知道这是否是由于Respond.js不支持某些操作符造成的。

对于特定元素的宽度，下面是按顺序应用到它的样式列表：

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
@media (min-width: 480px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
}
.modal-dialog {
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 480px) {
  .modal-dialog {
    width: 90%;
    margin: 30px auto;
  }
}
@media only screen and (min-width: 768px) {
  .modal-dialog {
    width: 75%;
  }
}

在桌面屏幕上，我预计宽度将上升75%，在所有浏览器中都是如此，但IE8使用的是600 in。IE8开发工具确实显示所有规则都已读取，但它们被重写。‘s的支撑部分解释了它的局限性，它可能不支持逻辑运算符。

我的问题是：(1) Respond.js是否支持包括"and“在内的逻辑运算符？(似乎并非如此)和(2)如果IE8/Respond.js找到了有效的媒体查询，它是否覆盖了其他所有内容(就像这里所做的)？

Answer 1

好的，我发现了这个问题，这实际上是Respond.js如何将CSS添加到head元素中的一个问题。我认为样式表中CSS的顺序将保持不变，但是Respond.js会移动一些东西。标题中CSS的顺序：

• 原始样式表
• 用于Respond.js media=“屏幕”的CSS
• 用于Respond.js media="all“的CSS
• Respond.js CSS for media="print“

看看我最初的风格列表--最后一个是@media (最小宽度:480 up ).

Respond.js确实尊重所有CSS媒体查询和操作符，但是任何带有“屏幕”的内容都将被CSS覆盖。

Answer 2

问题在于使用“只”：

关键字“only”也可用于对旧的用户代理隐藏样式表。用户代理必须处理以“only”开头的媒体查询，就好像‘only’关键字不存在一样。

来源：https://stackoverflow.com/a/8595600/1556245

而且，您的级联看起来非常不稳定，您的许多查询都被夸大了。这是你的风格应该喜欢的：

.modal-dialog {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
/*
  If this next media query is for print, specify that using the "print" media type.
  If it's for screens, delete it - it's being overriden by the next query.
*/
@media (min-width: 480px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
}
@media screen and (min-width: 480px) {
  .modal-dialog {
    width: 90%;
    margin: 30px auto;
  }
}
@media screen and (min-width: 768px) {
  .modal-dialog {
    width: 75%;
  }
}

删除单词“only”应该有好处，但我也建议删除每个示例中多余的查询，以避免混淆。