css3媒体查询响应式设计

我目前正在使用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;}
}

我的问题与这些媒体查询有关。我使用非常简单的样式从一个布局过渡到另一个布局。首先，正确显示红色背景。一旦我开始调整屏幕大小，我希望从红色变为绿色，但这不是我得到的。我开始变红，然后是完全没有颜色，然后是绿色

有人能给我解释一下我的媒体查询有什么问题吗？

打字错误：

#Midcol {background:#ff0000;}

您需要

#MidCol

打字：

#Midcol {background:#ff0000;}

---

如果您的代码与发布的代码完全一致，则您需要

#MidCol
因为您在980-1199媒体查询中键入了
#MidCol
。
如果您的代码与发布的代码完全一致，则是因为您在980-1199媒体查询中键入了
#MidCol
。
非常好，谢谢！我想我需要的只是一双额外的眼睛：PExcellent，谢谢！我想我所需要的只是一双额外的眼睛：PBe类和倒带。。。。等等，错域了。。。哦，是的，向上投票，向下投票，评论或编辑你的问题，选择一个答案，或关闭你的问题，和蔼可亲，然后倒带。。。。等等，错域了。。。哦，是的，向上投票，向下投票，评论或编辑你的问题，选择答案，或关闭你的问题