Javascript respond.js更喜欢媒体查询，而不是稍后定义的全局选择器

我在Bootstrap

.jumbotron

类中使用和重写填充时发现了这个错误

说明： 要简化问题，请查看此示例以引发respond.js错误：

.shouldBeGreen {
  display: table-cell;
  background-color: gray;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

@media screen and (min-width: 50px) {
  .shouldBeGreen {
    background-color: red;
    font-weight: bold;
  }
}


/* Later in the CSS or in another LESS file... */


/* Will be overridden by respond.js */
.shouldBeGreen {
  background-color: green;
}

在Chrome/FF/Opera/Safari和IE8（模拟或非模拟）中打开下面的示例页面，比较问题

行为： Respond.js会选择所有相关的媒体查询部分，并将它们置于源CSS文件之后，这会覆盖媒体查询后定义的所有关联选择器

解决方案： 我为此绞尽脑汁，但目前还没有解决办法

---

这是我要回复的bug报告。js:

这不是bug，而是浏览器引擎的工作原理

由于必须首先加载原始CSS，因此任何JS脚本都只能将样式附加到现有样式上。因此，所有这些风格最终都会出现——别无选择

在编写CSS代码时，必须记住这一点。

---

无论如何，将所有媒体查询放在非支持浏览器的“默认”样式之后是一个很好的设计原则

a快速且肮脏的解决方案应为：

/* Will be overridden by respond.js */
.shouldBeGreen {
  background-color: green;
  @media screen and (min-width: 50px) {
    background-color: green; //force green for respond.js
  }
}

---

通过这种方式，respond.js（总是在常规css样式之后应用规则）在运行时被强制应用为绿色。

“…这将覆盖在媒体查询之后定义的所有关联选择器。”那么，为什么不将媒体查询放在css文件的末尾呢！？此外，“本机支持CSS3媒体查询的浏览器将被选择尽快退出运行此脚本。”。因此，您可以通过使用条件注释将脚本限制在较旧的IE中，并加载单独的样式表（如果这对您来说更容易的话）？因为这个线程不是关于如何绕过我已经做过的问题，而是关于问题本身。问题是，respond.js（作为polyfill）的行为与本机支持媒体查询的浏览器不同。是的，我做到了！“问题是，respond.js（作为polyfill）的行为与本机支持媒体查询的浏览器不同。”是的，当您使用polyfill时，通常是这样。其中一些有一定的限制，你必须注意。让CSS依赖Javascript根本不是“理想的”。这就是为什么我不使用像“respond.js”这样的多边形填充，并且对于所有不支持MQs（本机）的浏览器都有一个固定宽度的版本！如果它的行为不同，那么问题是为什么首先要开发polyfill。它应该被称为“做一些事情的脚本”而不是“polyfill”，你同意我的观点吗？你有什么不满吗？你读过“”吗？这里描述了“…每个媒体查询块通过样式元素按顺序追加到头部，并且这些样式元素被启用和禁用（读取：追加并从DOM中删除）…”。这意味着，到目前为止，所有加载的CSS样式之后都将追加每个规则。这是“设计的”，不是bug。顺便说一句：按照默认规则（对于不支持的浏览器）编写所有MQs都是很好的风格。对不起，这与浏览器引擎无关。问题出在Respond.js库中。如果它不在物理CSS文件后附加媒体查询特定代码，则不会中断。“如果它不在物理CSS文件后附加媒体查询特定代码，则不会中断”，而这正是不可能的（由浏览器引擎的工作方式引起）。；-）来自

…

内部和外部CSS文件的规则总是排在第一位！所以JS的每一次操作都是在之后进行的，是吗？为什么Respond.js不能用替换的MQ而不是MQ部分复制完整的CSS？那会很好用的，你不觉得吗？顺便说一句。我已经把这个建议注入了他们的主题。不，不会的！仅仅是因为也没有办法“擦除”浏览器曾经知道的任何CSS样式。唯一的选择是“覆盖”它们。但是respond.js应该怎么做呢？也许这个命令是作者的意图？如果不是，为什么脚本要为你做这些工作？这只会使脚本的大小变大，执行速度变慢。最后，你的工作就是按照正确的顺序来写