@media 查询不工作（不改变 <h1> 的颜色）

Question

我正在尝试在调整屏幕大小时更改标签的颜色。我的 html 页面有以下行

<meta name="viweport" content="width=device-width, inital-scale=1.0">
.
.
    <div class="container">
        <div id="bg">
            <img src="/affeo/img/lll1.jpg" class="img-responsive"/>
            </div>
    </div>
    <div class="container">
        <div class="jumbotron text-left" id="jumboText">
                <h1>Hello World 0</h1>
            </div>
    </div>

CSS 文件具有以下样式：

@media all and (max-width: 1000px) {
    #bg {
          display:none;
    }

    #jumboText h1 {
      color: black;
    }
}
.
.
#jumboText {
  position: absolute;
  top: 20%; 
  left: 15%; 
  background-color:transparent;
}

#jumboText h1 {
  position: absolute;
  padding-left: 10px;
  color: #FFFFFF;
  opacity: 0;
  white-space: nowrap;
}

现在当我调整屏幕大小时，id:bg 中的图像按预期消失，但 jumboText 的颜色没有变为黑色。

Answer 1

将媒体查询移至代码底部。

您现在的方式 - 媒体查询中的代码将被您的常规代码覆盖

或者，您可以通过在选择器中添加 body 标签来增加媒体查询中类的特异性

@media all and (max-width: 1000px) {
    body #bg {
          display:none;
    }

    body #jumboText h1 {
      color: black;
    }
}

Answer 2

您需要在非媒体查询样式之后声明媒体查询样式 - 靠近底部。否则媒体查询将被覆盖。

还有一个在 h1 上声明的 opacity:0; 需要在媒体查询中更改。

http://jsfiddle.net/omupxnhm/6/

@media 查询不工作（不改变 <h1> 的颜色）

@media query not working (not changing color of <h1>)

html

css

twitter-bootstrap-3