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。