response.js将优先于媒体查询，而不是稍后定义的全局选择器

Question

我在Bootstrap .jumbotron类中使用和覆盖填充时发现了该错误。

描述：为了简化问题，请看下面的示例来引发response.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（是否仿真）中打开以下示例页面，以比较问题。

http://krnl.de/resources/respond.js-bug/index.html

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

解决方案：我为此花了很多精力，但目前还没有解决方案。

这是我给Respond.js的错误报告： https : //github.com/scottjehl/Respond/issues/225

Answer 1

这不是错误，而是浏览器引擎如何工作！

由于必须先加载原始CSS，因此任何JS脚本只能将样式附加到现有样式上。 因此，所有这些样式都在最后-别无选择！

编写CSS代码时必须牢记这一点。
无论如何，将所有媒体查询的末尾放在不支持浏览器的“默认”样式之后是一个好的设计原则。

Answer 2

一个快速而肮脏的解决方案应该是：

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

这样，总是在普通css样式之后始终应用规则的response.js被强制在运行时应用绿色。