Tip: show screen size for media queries

Sometimes, while working on media queries for a webpage, I like to be able to see the browser window size. I find it an easy way to detemine which CSS rules are being applied.

This set of CSS rules show the current media query breakpoints for width (W) and height (H) in the top right corner of the browser window:

html:before,
body:before {
  color     : #000;
  position  : fixed;
  right     : .5ch;
}

html:before {
  top       : 0;
}

body:before {
  top       : 2ex;
}

@media (min-width: 20ch) { html:before {content: 'W20'}}
@media (min-width: 30ch) { html:before {content: 'W30'}}
@media (min-width: 40ch) { html:before {content: 'W40'}}
@media (min-width: 50ch) { html:before {content: 'W50'}}
@media (min-width: 60ch) { html:before {content: 'W60'}}
@media (min-width: 70ch) { html:before {content: 'W70'}}
@media (min-width: 80ch) { html:before {content: 'W80'}}
@media (min-width: 90ch) { html:before {content: 'W90'}}
@media (min-width:125ch) { html:before {content:'W125'}}

@media (min-height: 30ex) { body:before {content: 'H30'}}
@media (min-height: 40ex) { body:before {content: 'H40'}}
@media (min-height: 50ex) { body:before {content: 'H50'}}
@media (min-height: 60ex) { body:before {content: 'H60'}}
@media (min-height: 70ex) { body:before {content: 'H70'}}
@media (min-height: 80ex) { body:before {content: 'H80'}}
@media (min-height: 90ex) { body:before {content: 'H90'}}

These values for min-width and min-height are specific for my situation. Adjust them to macth the values of the page you use them on.