html - 奇怪的媒体查询行为

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

score 4 · Accepted Answer

对于第二个媒体查询，您想将字体颜色设置为石灰？

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

试试这个：

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

1 回答 1