导致意外行为的媒体查询

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年]。

这将导致错误，因为它们不能同时运行，当条件对它们都是真的时。

检查这样的其他问题。