如何在媒体查询中定位 Jumbotron 元素？答案

【问题标题】：How do I target a Jumbotron element in a media query?如何在媒体查询中定位 Jumbotron 元素？
【发布时间】：2018-04-30 03:46:35
【问题描述】：

我无法使用我的 css 文件中的媒体查询来更改我的 jumbotron 内的 H1 的字体大小。

这是我的 jumbotron 代码：

<div class="jumbotron jumbotron-bike">
  <h1>Get Going</h1>
  <p>Jumpstart your startup with some crowdsourced
    seed money, or support one of our 300,000,000+
    creators and get rewards.</p>
    <a class="btn btn-primary btn-lg"href="#">Jump In</a>
</div>

这是我的 CSS：

    .jumbotron h1{
  font-family: Monoton;
  font-size: 7.1rem;
}

@media only screen and (max-width:480px){
  .jumbotron h1{
    font-size: 5.7rem;
  }
}

当我运行网站时，当我调整页面大小时，H1 的字体大小不会受到影响。我通过更改正文的背景颜色测试了媒体查询，并且它起作用了，所以我认为这与嵌套在 jumbotron 内部的事实有关。我对网络开发很陌生，所以它可能很简单，但我似乎无法在网络上找到任何答案。

【问题讨论】：

标签： html css media-queries

【解决方案1】：

这似乎按预期工作。检查下面的jsfiddle。我在调整大小时将字体大小更改为更小，以便在媒体查询中更容易看到更改。

HTML

<div class="jumbotron jumbotron-bike">
  <h1>Get Going</h1>
  <p>Jumpstart your startup with some crowdsourced
    seed money, or support one of our 300,000,000+
    creators and get rewards.</p>
    <a class="btn btn-primary btn-lg"href="#">Jump In</a>
</div>

CSS

.jumbotron h1{
  font-family: Monoton;
  font-size: 7.1rem;
}

@media only screen and (max-width:480px){
  .jumbotron h1{
    font-size: 2.7rem;
  }
}

jsfiddle

【讨论】：