CSS hacks: Set different coding for each individual resolution and for phones

This expert-level topic is part of our CSS Tutorials and Add-ons section:
http://myanimelist.net/forum/?topicid=419405

/* Base styles here for below 1000px */
body {background: green;}

/* Media query for devices above 1000px */
@media all and (min-device-width:1001px) {

body {background: red;}
}


/* Media query for devices above 1024px */
@media all and (min-device-width:1025px) {

body {background: black;}
}

/* Media query for devices above 1140px */
@media all and (min-device-width:1141px) {

body {background: teal;}
}

/* Media query for devices above 1280px */
@media all and (min-device-width:1281px) {

body {background: blue;}
}

/* Media query for devices above 1366px */
@media all and (min-device-width:1367px) {

body {background: orange;}
}

/* Media query for devices above 1440px */
@media all and (min-device-width:1441px) {

body {background: purple;}
}

/* Media query for devices above 1600px */
@media all and (min-device-width:1601px) {

body {background: brown;}
}

/* Media query for devices above 1680px */
@media all and (min-device-width:1681px) {

body {background: silver;}
}

/* Media query for devices above 1920px */
@media all and (min-device-width:1921px) {

body {background: gold;}
}

@import url(layout 1 here) screen and (min-width: 0px) and (max-width: 1499px);
@import url(layout 2 here) screen and (min-width: 1500px) and (max-width: 2200px);