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。