媒體查詢：調整瀏覽器大小時不會更改樣式

Question

我有這個代碼。 當我將瀏覽器調整為min-width: 480px它不會將背景色更改為藍色，而將寬度更改為100px

到目前為止，這是我的代碼：

 @media screen and (min-width: 480px) { .boxcontainer { background-color: blue; width: 100px; } } .boxcontainer{ width: 1300px; background-color: green; height: 200px; } 

 <div class="boxcontainer"> </div> 

謝謝

Answer 1

切換CSS規則的順序，將CSS更改為

.boxcontainer {
    width: 1300px;
    background-color: green;
    height: 200px;
}
@media screen and (min-width: 480px) {
    .boxcontainer {
        background-color: blue;
        width: 100px;
    }
}

如在此JSFiddle示例中。 只要寬度不小於480px ，背景為藍色，否則變為綠色。

如果碰巧您打算做相反的事情， 因為.boxcontainer{width:1300px}讓我認為您想.boxcontainer{width:1300px} ，然后只需將媒體查詢斷點更改為@media screen and (max-width: 480px)而不是@media screen and (min-width: 480px) 。

您可以在此JSFiddle中看到第二個選項