@media查询无法按预期工作

Question

我正在尝试将if(+$Freespace -lt 25){ ... } 个标记居中，直到屏幕达到最小值768px，然后左对齐768px及以上的p标记。我对p标签做了同样的事情，但不是左对齐768px，而是将其设置为左对齐为992px。

我的h1, h2标记不在768px及以下的中心位置。我的p和h1代码仅位于768px和992px之间。一旦我达到767px及以下，当它应该居中时，所有左对齐。 CSS下面。我做错了什么？

h3

这是html：

/*======= 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;
}

Answer 1

您应该按照数学顺序放置媒体查询，首先是数字较大的媒体查询，然后是较低数字的查询。将它们放在css文件的底部是一个很好的做法。
此外，您应该检查Inspect元素，并在最小化屏幕时仔细检查规则的变化。也许规则适用并且它们被覆盖，所以你必须使用！important或者它们从不适用，所以你错过了一个括号或其他东西。