導致意外行爲的媒體查詢

Question

我根據引導網格系統大小爲不同的屏幕大小做了一些不同的樣式。出於某種原因，某些樣式正在工作，有些則沒有。這裏是CSS：

@media only screen 
    and (max-width: 767px) { 

    div.bm { 
    display: none; 
    } 

    div.br { 
    height: 40%; 
    } 

    div.main-row { 
    height: 60%; 
    } 

    #main-text{ 
    font-size: 3rem; 
    font-weight: 300; 
    } 
} 

@media only screen 
    and (max-width:991px) 
    and (min-width:767px) { 

    div.sm { 
    display: none; 
    } 

    div.main-row { 
    height: 100%; 
    } 

    #main-text{ 
    font-size: 4.5rem; 
    font-weight: 300; 
    } 

}​ 

@media only screen 
    and (min-width:991px) 
    and (max-width:1999px) { 

    div.sm { 
    display: none; 
    } 

    div.main-row { 
    height: 100%; 
    } 

    #main-text { 
    font-size: 5.5rem; 
    font-weight: 300; 
    } 
} 

@media only screen 
    and (min-width: 1200px) { 

    div.sm { 
    display: none; 
    } 

    div.main-row { 
    height: 100%; 
    } 

    #main-text { 
    font-size: 6.5rem; 
    font-weight: 300; 
    } 
} 

，主要是未生效的display:none，但似乎像#main-text是越來越正確調整。我有一種感覺周圍有行語法錯誤：

@media only screen and (min-width:991px) and (max-width:1999px) {

因爲我使用的CSS預處理手寫筆，這是造成周圍的代碼行此錯誤：

ParseError: stylus/monster.styl:40:8 
    36|  font-weight: 300; 
    37| } 
    38| }​ 
    39| 
    40| @media only screen 
--------------^ 
    41| and (min-width:991px) 
    42| and (max-width:1999px) { 
    43| 

expected "indent", got "media" 

代碼有什麼問題？

Answer 1

的一個問題是這樣的：

第一：

@media only screen 
    and (min-width:991px) 
    and (max-width:1999px) 

這裏像素寬度的段是[991; 1999年]。

第二種：

@media only screen 
    and (min-width: 1200px) 

這裏像素寬度的段[1200; + infinite]

如果你看看這兩個像素寬度數組：有兩個媒體查詢中包含一些元素：[1200; 1999年]。

這將導致錯誤，因爲它們不能同時運行，當條件對它們都是真的時。

檢查這樣的其他問題。