html - 奇妙なメディアクエリの動作

Question

私は一生理解できない奇妙な行動に出くわしました。

私は、多数のメディアクエリ (正確には 7 つ) を備えた流動的なグリッドデザインを使用しています。私がやっていることはベストプラクティスであるというふりをしていないので、キックのために7つのクエリを作成しました.

簡潔にするために、問題のあるクエリとその直前のクエリ、および直後のクエリの 3 つのクエリのみを貼り付けます。

前のもの

@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;
    }
}

それで、何が起こっているのですか？さて、2 つのメディアクエリ (前、後) が機能し、フォントの色をとのいずれかに変更しPaleTurquoiseますred。問題を引き起こしているのは、に変更しfont-colorていませんlime。

ここで奇妙なのは、厄介なメディアクエリに他の css を追加すると、その特定の css が機能することです。

なぜこうなった？

css 全体をここに貼り付けました: DPASTE - styles.css

ここに HTML 全体を貼り付けました: DPASTE - index.html

Erik Meyersのリセットスタイルシートも使用しています。

score 4 · Accepted Answer

2 番目のメディアクエリで、フォントの色をライムに設定しますか?

現在、背景色を設定しています。

これを試してください：

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

html - 奇妙なメディア クエリの動作