Responsive CSS not working on different devices - css

Question

Having a difficult time getting the CSS to work on different devices. I have a desktop, an iPad 4 and a Sony S8. With the following CSS media queries:
#media screen and (min-width: 1200px){
body{
background: red;
}
}
#media screen and (min-width: 768px) and (max-width: 979px){
body{
background: green;
}
}
#media screen and (max-width: 767px){
body{
background: purple;
}
}
#media screen and (max-width: 480px){
body{
background: tomato;
}
}
I have honestly tested MANY variations if this from examples from many different internet sources and articles and still cannot get it to work properly. With the configuration above, my desktop has a red browser background - the Sony and the iPad both have white. Can someone please provide me with some direction? Thank you.
UPDATE:
Changed my CSS to look like this:
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
#media screen and (min-width:320px) {
body{
background: tomato;
}
}
/* smartphones, Android phones, landscape iPhone */
#media screen and (min-width:480px) {
body{
background: red;
}
}
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
#media screen and (min-width:600px) {
body{
background: blue;
}
}
/* tablet, landscape iPad, lo-res laptops ands desktops */
#media screen and (min-width:801px) {
body{
background: yellow;
}
}
/* big landscape tablets, laptops, and desktops */
#media screen and (min-width:1025px) {
body{
background: green;
}
}
/* hi-res laptops and desktops */
#media screen and (min-width:1281px) {
body{
background: purple;
}
}
Desktop is now purple, iPad is now yellow and the S8 is YELLOW??

Answer 1

This code works for me. You must have something overriding it.
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
#media screen and (min-width:320px) {
body{
background: tomato;
}
}
/* smartphones, Android phones, landscape iPhone */
#media screen and (min-width:480px) {
body{
background: red;
}
}
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
#media screen and (min-width:600px) {
body{
background: blue;
}
}
/* tablet, landscape iPad, lo-res laptops ands desktops */
#media screen and (min-width:801px) {
body{
background: yellow;
}
}
/* big landscape tablets, laptops, and desktops */
#media screen and (min-width:1025px) {
body{
background: green;
}
}
/* hi-res laptops and desktops */
#media screen and (min-width:1281px) {
body{
background: purple;
}
}