Nick 的插图有三个不同的头部图层，它们只是略微不同的变体。我们可以用动画或 JavaScript 替换这些图像，但始终运行的动画（甚至是在每次页面加载时运行的动画）可能会让论坛的重度用户感到非常烦人。所以我们将把它做成一个彩蛋，也就是说，你可能不会注意到它，除非你偶然碰巧碰上了它。
我们将做的是，当浏览器窗口大小调整通过 @media 查询时，替换图像。我们不会仅仅使用少量 @media 查询来更改头部几次，而是会制作大量的 @media 查询，每隔几个像素就更改一次。本质上是借鉴了 Arley McBlain 的 “Lark Queries。” 的精神。
我们使用 Sass 循环来创建所需的多个 @media 查询。最终
@for $i from 25 through 125 {
@media (min-width: (($i+5)*15)+6+px) and (max-width: (($i+5)*15)+10+px) {
.forum-wrap { background-image: url(../wp-content/themes/CSS-Tricks-10/images/header-forums-2.png);
}
}
@media (min-width: (($i+5)*15)+11+px) and (max-width: (($i+5)*15)+15+px) {
.forum-wrap { background-image: url(../wp-content/themes/CSS-Tricks-10/images/header-forums-3.png);
}
}
}这样做的好处是，除非页面大小发生改变，否则我们不会加载这些额外的图像，因此我们不会仅仅为了一个彩蛋而加载额外的内容。
好奇是否可以在媒体查询中使用 OR 除了 AND。这样你只需要两个规则（带有很多 OR），而不是很多带 AND 的规则。
这是一个好主意！最终我认为这两种方法各有优劣（代码量大致相同，用循环编写稍微困难一些，而且重复代码更少，会被 gzip 压缩掉）。
在媒体查询中用逗号表示 OR，比如
我注意到，如果我连续大约 10 秒左右晃动页面的宽度，我就会收到 Chrome 的“糟糕！- 发生错误...”消息，这可能是由于后台有太多媒体查询在改变，导致分配的内存用完。
我知道，用户通常不会重复调整大小，但是有没有什么已知的更节省资源的替代方法呢？
为什么不直接用 JS 和 resize 事件呢？