@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 &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 -->

来源

2016-07-15 user3786102

基本上按预期工作时，弹出一个CodePen - 你能提供示例HTML显示问题？另外，请注意'#about h1，h3'将应用于* all *'h3'标签，而不仅仅是'＃about'中的标签。您可能的意思是'#about h1，#about h3' –

您应该提供[完整示例]（http://stackoverflow.com/help/mcve）。你可以使用[Stack Snippets]（http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）来做到这一点。 – transistor09

我也提供了我的html。 – user3786102

你应该把媒体查询在数学顺序，先用更大数量的人，然后那些具有较低。把它们放在你的css文件的底部是一个好习惯。
此外，您应该检查检查元素，并仔细检查规则如何最小化您的屏幕时更改。也许这些规则适用并被覆盖，所以你必须使用！重要的或他们从不应用，所以你错过了一个括号或别的东西。

来源

2016-07-15 17:24:29

明白！感谢我对@media查询新手的提示。您的评论导致我验证我的CSS，我收到了解析错误。我慢慢扫描了我的所有CSS，发现我在css的另一个区域丢失了一个大括号，导致了整个事情。再次感谢！ – user3786102

@media查询不能按预期工作

回答

相关问题