Dimensione schermo differenza media in un foglio di stile css

Question

Ciao Ho questo script e mi serve quando la dimensione dello schermo è 1600 px background-color era rossa e quando la dimensione dello schermo è 1366 px background-color era nero, ma il mio codice non funziona, la query media funziona solo 1600 px

html

<div> 

</div> 

css

div{ 
    width:100%; 
    height:100%; 
    background-color:grey; 
} 

@media screen and (max-width:1366px){ 
    div{ 
     background-color:black; 
    } 
} 

@media screen and (max-width:1600px){ 
    div{ 
     background-color:red; 
    } 
} 

Answer 1

il secondo stili sovrascrive il primo. Cambia l'ordine. Funzionerà.

div{ 
width:100%; 
height:100%; 
background-color:grey; 
} 

@media screen and (max-width:1600px){ 
    div 
    { 
    background-color:red; 
    } 
} 

@media screen and (max-width:1366px){ 
    div 
    { 
    background-color:black; 
    } 
} 

DEMO