@media查询不能按预期工作
问题描述:
我试图以p
为中心标记,直到屏幕达到最小768px,然后将p
标记左对齐768px及以上。我正在做同样的事情为我的h1, h2
标签,而不是在768px左对齐,我把它设置为左对齐在992px。我的p
标记未集中在768px及以下我的h1
和h3
标签只集中在768px和992px之间。一旦我点击767px并且低于所有应该居中的所有东西时,它们就会一致。下面的CSS。我究竟做错了什么?@media查询不能按预期工作
/*======= 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 & 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 -->
答
你应该把媒体查询在数学顺序,先用更大数量的人,然后那些具有较低。把它们放在你的css文件的底部是一个好习惯。
此外,您应该检查检查元素,并仔细检查规则如何最小化您的屏幕时更改。也许这些规则适用并被覆盖,所以你必须使用!重要的或他们从不应用,所以你错过了一个括号或别的东西。
+0
明白!感谢我对@media查询新手的提示。您的评论导致我验证我的CSS,我收到了解析错误。我慢慢扫描了我的所有CSS,发现我在css的另一个区域丢失了一个大括号,导致了整个事情。再次感谢! – user3786102
基本上按预期工作时,弹出一个CodePen - 你能提供示例HTML显示问题?另外,请注意'#about h1,h3'将应用于* all *'h3'标签,而不仅仅是'#about'中的标签。您可能的意思是'#about h1,#about h3' –
您应该提供[完整示例](http://*.com/help/mcve)。你可以使用[Stack Snippets](http://blog.*.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)来做到这一点。 – transistor09
我也提供了我的html。 – user3786102