Media request difference screen size in one CSS style sheet

Question

Hello, I have this script, and I need when the screen size is 1600 pixels the background-color was red, and with the screen size 1366 px the background-color was black, but my code does not work, the media query only works 1600 pixels

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

The second styles overwrite the first. Reorder. He will work.

  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