奇怪的媒体查询行为

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

使用第二个媒体查询，您要将字体 - 颜色设置为石灰？

目前您正在设置背景 -color。

试试这个：

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