CSS3媒體查詢問題

Question

即使屏幕尺寸大於1024px，我以爲我只爲500px和1024px之間的屏幕設置了一條規則。

這是CSS。 .red樣式正確應用於小於480px的屏幕上。只是黃色應用於所有屏幕上，即使在的1024px上也是如此。

.buy { 
    border: 1px solid #ABABAB; 
    color: #333333; 
    display: block; 
    font-family: calibri,helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    height: 25px; 
    line-height: 25px; 
    margin: auto; 
    text-align: center; 
    text-decoration: none; 
    width: 70px; 
} 

@media only screen and (max-width: 480px) { 
    .buy { 
     color: red; 
    } 
} 

@media screen and (max-width: 1024px) and (min-width: 500px) { 
    .buy { 
     color: yellow; 
    } 
} 

Answer 1

您忘記only

@media only screen and (min-width: 500px) and (max-width: 1024px) { 
    .buy { 
    color: yellow; 
    } 
}