IE8 忽略带有 response.js 的媒体查询答案

【问题标题】：IE8 ignoring media queries w/ respond.jsIE8 忽略带有 response.js 的媒体查询
【发布时间】：2014-12-17 17:27:56
【问题描述】：

尽管支持 Respond.js，IE8 似乎忽略了一些 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 使用 600px。 IE8 开发工具确实显示所有规则都已读取，但它们已被覆盖。 Respond.js 的 support section 解释了它的局限性，可能不支持逻辑运算符。

我的问题是：(1) Respond.js 是否支持包括“and”在内的逻辑运算符？（看起来不是这样），以及 (2) 如果 IE8/Respond.js 找到了有效的媒体查询，它是否会覆盖其他所有内容（就像这里一样）？

【问题讨论】：

标签： css internet-explorer-8 respond.js

【解决方案1】：

好的，我找到了问题所在，这实际上是 Respond.js 如何将 CSS 添加到 head 元素的问题。我认为样式表中 CSS 的顺序会保持不变，但 Respond.js 会移动。头部CSS的顺序：

原始样式表
Respond.js CSS for media="screen"
Respond.js CSS for media="all"
Respond.js CSS for media="print"

看看我原来的样式列表——最后一个是@media (min-width: 480px)....

Respond.js 确实支持所有 CSS 媒体查询和操作符，但任何带有“screen”的内容都将被 CSS 覆盖而没有它。

【讨论】：

感谢您的跟进并发布解决方案

【解决方案2】：

问题在于“only”的使用：

关键字“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”这个词应该可以解决问题，但我也建议删除我的示例中的多余查询，以避免混淆。

【讨论】：