@media 查询未按预期工作[关闭]

Question

我正在尝试将p 标签居中，直到屏幕达到最小 768 像素，然后将 p 标签从 768 像素及以上左对齐。我对 h1, h2 标签做同样的事情，但不是在 768 像素左对齐，而是在 992 像素左对齐。

我的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 文件的底部是一个很好的做法。
此外，您应该检查检查元素并仔细检查最小化屏幕时规则如何变化。也许规则适用并且它们被覆盖，所以你必须使用 !important 或者它们永远不会应用，所以你错过了一个括号或其他东西。