我的媒體查詢怎麼不起作用？

我想讓我的網站'響應'。我有2列，並試圖讓他們在992px以下時彼此堆疊。這是我用於媒體查詢的列和代碼的代碼。每當我走到992px以下時，col1停留在69％，col2停留在29％，但是兩者都是向左浮動並堆疊在彼此之上。我只是想知道我做錯了什麼，因爲我希望它們在992px以下佔用屏幕的寬度。 col1和col2的代碼是否覆蓋@media？我已經嘗試了@media：inline和display：block，但都沒有工作。很抱歉，如果它是凌亂的，我纔開始學習上週五:)我的媒體查詢怎麼不起作用？

@media (min-width: 768px) and (max-width: 991px) { 
     .col1 { 
      width: 98%; 
       } 
     .col2 { 
      width: 98%; 
       } 
      } 

    .col1 { 
     margin: auto; 
     float: left; 
     width: 69%; 
     background-color: #686472; 
     color: white; 
     padding: 5px; 
     font-family: geneva; 
     font-size: 14px; 
     } 

    .col2 { 
     margin: auto; 
     float: left; 
     width: 29%; 
     background-color: #454349; 
     color: white; 
     padding: 5px; 
     font-family: geneva; 
     font-size: 14px; 
     padding-bottom: 39px; 
     }

來源

2015-04-02 Erik

您已回答了您自己的問題。隨後的聲明覆蓋媒體查詢。對代碼重新排序並添加其他媒體查詢以涵蓋所有需要的大小。 – 2015-04-02 20:53:22

.col1 { 
    margin: auto; 
    float: left; 
    width: 69%; 
    background-color: #686472; 
    color: white; 
    padding: 5px; 
    font-family: geneva; 
    font-size: 14px; 
    } 

.col2 { 
    margin: auto; 
    float: left; 
    width: 29%; 
    background-color: #454349; 
    color: white; 
    padding: 5px; 
    font-family: geneva; 
    font-size: 14px; 
    padding-bottom: 39px; 
    } 

@media (min-width: 768px) and (max-width: 991px) { 
     .col1 { 
      width: 98%; 
       } 
     .col2 { 
      width: 98%; 
       } 
      }

理想的情況下，雖然，你會創建兩個以上媒體查詢，一個具有最大寬度：768px，以及一個帶有MIN-寬度：991px。這樣你就可以解釋上下的空間，並把你所有的數字放在那裏，這樣就不會有衝突。

本質上發生的是，媒體查詢之外的任何內容都適用於所有寬度。這個問題的一個簡單的，非正統的解決方案是在媒體查詢中爲規則添加'！important'，而不需要改變順序。

@media (min-width: 768px) and (max-width: 991px) { 
     .col1 { 
      width: 98% !important; 
       } 
     .col2 { 
      width: 98% !important; 
       } 
      }

然而，使用「！重要」可以成爲大樣式可能發生衝突，頭髮開始被拉開，明智地使用它很大的問題。

來源

2015-04-02 20:59:10

我的媒體查詢怎麼不起作用？

回答

相關問題