隱藏/顯示Div取決於屏幕寬度

Question

當前屏幕寬度不足時，我正在使用CSS隱藏div部分。 那個工作正常，但我正在努力使自己回避，如何在隱藏div時顯示替換div。

我可能會以錯誤的方式進行操作，但這是我的代碼：

@media all and (max-width: 955px) { 
    div.grid12-11 {
        display: none;
    }
}

@media all and (max-width: 954px) {
    div.grid12-12 {
        display: block;
    }
}

我要實現的是，當屏幕寬度低於955px時，grid12-11被隱藏並替換為grid12-12。

當前，兩個div的顯示都大於955px，而不是替換該塊。

有沒有更好/正確的方法來做到這一點？

Answer 1

無需更改媒體查詢

   div.grid12-12 {
       display: none; // make it hidden on default view
   }

   @media all and (max-width: 955px) { 
        div.grid12-11 {
            display: none;
        }
         div.grid12-12 {
            display: block;
        }
    }

Answer 2

檢查此： http : //jsfiddle.net/Mohamed_nabil/cHQcD/

@media (max-width: 955px) { 
    div.gridFirst {
        display: none;
    }
}

@media (min-width: 955px) {
    div.gridSecond {
        display: none;
    }
}

Answer 3

您的初始規則如何設置？ 我認為您遇到了特異性問題。 如果您的“標准”規則與媒體查詢中的規則相同或更具體，則媒體查詢將不會覆蓋它們。

這似乎可以達到您的期望：

@media all and (max-width: 955px) { 
    div.grid12-11 {
        display: none;
    }
    div.grid12-12 {
        display: block;
    }
}

.grid12-11 { display:block; }
.grid12-12 { display:none; }

請注意，如果您的標准規則（非媒體）以“ div”為前綴，則該規則將不起作用（取決於處理規則的順序以及所使用的瀏覽器）。