css3媒体查询响应式设计

Question

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

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

有人可以向我解释我的媒体查询有什么问题吗？

Answer 1

错字：

#Midcol {background:#ff0000;}

您需要#MidCol。

Answer 2

如果您的代码完全已发布，那是因为您在980-1199媒体查询中输入了#Midcol。