responsive CSS template for development

responsive-background-colors.css

/* RED 1024 */
@media only screen and (max-width: 1024px) {
  body { background-color: rgba(255, 0, 0, 0.5); }
}

/* ORANGE 972 */
@media only screen and (max-width: 972px) {
  body { background-color: rgba(255, 165, 0, 0.5); }
}

/* YELLOW 768 */
@media only screen and (max-width: 768) {
  body { background-color: rgba(255, 255, 0, 0.5); }
}

/* GREEN 767 */
@media only screen and (max-width: 767px) {
  body { background-color: rgba(0, 128, 0, 0.5); }
}

/* BLUE 480 */
@media only screen and (max-width: 480px) {
  body { background-color: rgba(0, 0, 255, 0.5); }
}

/* PURPLE 320 */
@media only screen and (max-width: 320px) {
  body { background-color: rgba(128, 0, 128, 0.5); }
}