sizer-css

sizer.css

/* put a div in your html: <div id="sizer"></div> */
#sizer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.5em;
  color: white;
  padding: 0.1em 0.25em;
  text-align: center;
  background-color: green;
  opacity: 0.25;
}

#sizer:before {
  content: "default";
}

@media screen and (min-width: 400px) {
  #sizer {
    background-color: blue;
  }
  #sizer:before {
    content: "$medium-screen";
  }
}

@media screen and (min-width: 910px) {
  #sizer {
    background-color: purple;
  }
  #sizer:before {
    content: "$bigger-screen";
  }
}

@media screen and (min-width: 1200px) {
  #sizer {
    background-color: red;
  }
  #sizer:before {
    content: "$hugest-screen";
  }
}