@media 查询未按预期工作

Question

我试图将 p 标签居中，直到屏幕达到最小 768 像素，然后从 768 像素及以上左对齐 p 标签。我正在为我的 h1, h2 标签做完全相同的事情，但我将它设置为在 992px 处左对齐，而不是在 768px 处左对齐。

我的 p 标签在 768px 及以下未居中。我的 h1 和 h3 标签仅在 768px 和 992px 之间居中。一旦我达到 767px 并且下方的所有内容都应该居中对齐。 CSS 下面。我做错了什么？

/*======= about ========*/
#about p {
  text-align: center;
  padding-bottom: 15px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  
  #about p {
  text-align: left;
  }
}

#about h3 {
  margin-top: -5px; 
}

#about .team h1 {
  font-weight: bold;
}

#about h1, h3 {
  text-align: center;
}

/* Medium devices (medium devices, 992px and up) */
@media (min-width: 992px) {  
  #about h1, h3 {
    text-align: left;
  }
}

#about img {
  margin: 0 auto;
}

这里是 html:

<div id="about">
<div class="container">
  <div class="row">
    <p></p>
    <p></p>
    <p></p>
  </div> <!-- end row -->

  <div class="row">
    <div class="col-md-4 team">
      <h1>Meet The Team</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      <a href="bios/#.html"><img src="img/team/580x410.jpg" class="img-    responsive" alt=""></a>
      <h1></h1>
      <h3 class="text-muted">Chairman &amp; CEO<br> 
                  Senior Wealth Advisor</h3>
    </div>
    <div class="col-md-4">
      <a href="bios/"><img src="img/team/580x410.jpg" class="img-responsive"     alt=""></a>
      <h1></h1>
      <h3 class="text-muted">President<br>
      Senior Wealth Advisor</h3>
    </div>
    <div class="col-md-4">
      <a href="bios/.html"><img src="img/team/580x410.jpg" class="img-    responsive" alt=""></a>
      <h1></h1>
      <h3 class="text-muted">Chief Operating Officer</h3>
    </div>
  </div> <!-- end row -->
</div> <!-- end container -->

Answer 1

您应该按照数学顺序放置媒体查询，首先是数字较大的，然后是数字较小的。最好将它们放在 css 文件的底部。
此外，您应该检查 Inspect element 并仔细检查当您最小化屏幕时规则如何变化。也许规则适用并且它们被覆盖，所以你必须使用 !important 否则它们永远不会适用，所以你错过了括号或其他东西。

@media 查询未按预期工作

@media queries not working as expected

css

media-queries

twitter-bootstrap