css - 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

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