@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查詢不能按預期工作

回答

相關問題