Home › Drupal Collection

What's My Screen Size?

Wed, 09/18/2013 - 17:40 — admin

These days, "responsive" sites are all the rage. That means they respond to the device's screen size, not so much to the user.

The CSS below uses media queries to give you a gross idea of your screen size:

/********************************************/
/* Silly media queries to show screen size. */
/********************************************/
@media (max-width: 480px) {body:before {content: "SMALL"; color: red;} }
@media (min-width: 481px) and (max-width: 690px) {body:before {content: "BETWIXT"; color: red;} }
@media (min-width: 691px) and (max-width: 1024px) {body:before {content: "MEDIUM"; color: red;} }
@media (min-width: 1025px) {body:before {content: "LARGE"; color: red;} }<