予期せぬ動作の原因となるメディアクエリ

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です。 +無限]

ピクセル幅の2つの配列を調べると、両方のメディアクエリに含まれるいくつかの要素があります。 1999]。

両方の条件が真である場合、どちらも実行できないため、エラーになります。

このような他の問題を確認してください。