奇怪的媒体查询行为

Question

我遇到了一些我一生都无法弄清楚的奇怪行为。

我有一个带有许多媒体查询（准确地说是 7 个）的流畅网格设计。 我并没有假装我正在做的是最佳实践，所以我做了 7 个查询。

为简洁起见，我将仅粘贴三个查询，一个是问题所在，一个是之前的一个，一个是紧随其后的。

前一个

@media only screen and (min-width: 1170px) and (max-width: 1189px) {
    body {
        color: PaleTurquoise;
    }    
}

麻烦的人

@media only screen and (min-width: 1190px) and (max-width: 1409px) {
    body {
        color: lime;
    }
}

紧随其后的那个

@media only screen and (min-width: 1410px) {
    body {
        max-width: 2000;
        color: red;
    }
}

那么发生了什么？好吧，两个媒体查询（之前，之后）将起作用并将字体颜色更改为PaleTurquoise 和red。造成麻烦的是没有将其font-color 更改为lime。

这里奇怪的是，如果我将任何其他 css 添加到麻烦的媒体查询中，该特定 css 将起作用。

为什么会这样？

我已将整个 css 粘贴在这里：DPASTE - styles.css

我在此处粘贴了整个 HTML：DPASTE - index.html

我也在使用Erik Meyers reset stylesheet

Answer 1

对于第二个媒体查询，您要将 font-color 设置为石灰吗？

当前您正在设置背景-颜色。

试试这个：

@media only screen and (min-width: 1190px) and (max-width: 1409px) {
    body {
        color: lime;
    }
}