如何在媒体查询中定位Jumbotron元素并修改其内H1字体大小？

嘿，我来帮你排查下这个问题！先把你提供的代码整理清楚，再一步步分析可能的原因：

你的代码参考 #

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: 5rem; /* 假设你设置了默认字体大小 */
}

常见问题及解决办法 #

• 媒体查询的写法和位置错误
  CSS是层叠执行的，媒体查询必须写在基础样式之后，才能覆盖默认值。而且语法要完整，比如针对小屏幕调整的正确写法：

  /* 基础样式放在前面 */
  .jumbotron h1 {
    font-family: Monoton;
    font-size: 5rem;
  }
  
  /* 媒体查询放在基础样式之后 */
  @media (max-width: 768px) {
    .jumbotron h1 {
      font-size: 2.5rem; /* 小屏幕下的字体大小 */
    }
  }
  

  检查下你的媒体查询有没有闭合括号、大括号，语法不能出错。

• 选择器优先级不够
  Bootstrap自带的.jumbotron h1样式可能和你的选择器权重一样，甚至更高。这时候你可以用更具体的选择器来提高权重，比如结合Jumbotron的第二个类：

  @media (max-width: 768px) {
    .jumbotron.jumbotron-bike h1 {
      font-size: 2.5rem;
    }
  }
  

  要是想快速验证是不是优先级问题，可以临时加!important（不推荐长期用，只是测试）：font-size: 2.5rem !important;，如果生效了，就说明是权重的问题，再优化选择器就行。

• 媒体查询断点搞反了
  别把min-width和max-width搞混！如果想在屏幕变小时缩小字体，要用max-width；如果是屏幕变大时放大字体，才用min-width。比如你写了@media (min-width: 768px)，那只有屏幕宽度大于768px时才会生效，和你的需求可能相反。

• 用开发者工具排查
  打开浏览器F12的开发者工具，找到这个h1元素，看「Styles」面板：

  • 如果媒体查询的样式被划掉，说明优先级不够或者媒体查询没触发；
  • 可以在媒体查询里加个显眼的样式（比如color: red;），看看对应屏幕宽度下h1会不会变红，快速判断媒体查询是否生效。

内容的提问来源于stack exchange，提问作者Martin