响应.js将首选媒体查询而不是稍后定义的全局选择器

respond.js will prefer media queries over later defined global selectors

本文关键字：定义 选择器 全局 js 查询 媒体 响应      更新时间：2023-09-26

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

描述：为了简化问题，请查看此示例以引发响应.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

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

溶液：我为此绞尽脑汁，但目前没有解决方案。

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

这不是一个错误，而是浏览器引擎的工作方式！

由于必须首先加载原始 CSS，因此任何 JS 脚本都只能将样式附加到现有样式中。因此，所有这些风格都出现在最后 - 没有其他方法！

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

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

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

以这种方式响应.js，即在正常的 css 样式之后始终应用规则，在运行时强制应用绿色。

相关文章：