html - @media 查询不工作(不改变

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;
    }
}