1

現在、レイアウトの構築に css3 メディア クエリを使用しています。すべてのメディア クエリが機能していますが、設計に小さな「癖」があります。以下のコードを提供します。

@media (min-width: 1200px) {
    #LeftNav, #RightNav {display:block;}
    #MidCol {background:#ff0000;}
}

@media (min-width: 980px) and (max-width: 1199px) {
    #LeftNav, #RightNav {display:block;}
    #Midcol {background:#ff0000;}
}

@media (min-width: 768px) and (max-width: 979px) {
    #MidCol {background:#00ff00;}
}

私の質問は、これらのメディア クエリに関係しています。あるレイアウトから別のレイアウトに移行するために、非常に単純なスタイルを使用しています。まず、赤い背景が正しく表示されます。画面のサイズ変更を開始すると、赤から緑に変わると予想されますが、これは私が得ているものではありません。私は赤くなってから、まったく色がなくなり、次に緑になります。

誰かがメディアクエリで何が間違っているのか説明してもらえますか?

4

2 に答える 2

1

打ち間違え：

#Midcol {background:#ff0000;}

が必要#MidColです。

于 2013-03-01T03:20:32.713 に答える
0

コードが投稿されたとおりである場合、それは 980-1199 メディア クエリに入力したためです#Midcol。

于 2013-03-01T03:21:09.247 に答える