An example of my new set of media queries. Flexible, more fluid media queries.

lovely-media-queries.css

//=Variables
//=Media Queries
$breakpoint-tiny: 20em;
$breakpoint-small: 30em;
$breakpoint-medium: 50em;
$breakpoint-extra-medium: 65em; //lol
$breakpoint-large: 80em;
$breakpoint-extra-large: 100em;

//=Global Styles
html {
  font-size: 65%;
  
  @media all and (min-width: $breakpoint-tiny) {
    font-size: 80%;
  }

  @media all and (min-width: $breakpoint-small) {
    font-size: 90%;
  }

  @media all and (min-width: $breakpoint-medium) {
    font-size: 100%;
  }

  @media all and (min-width: $breakpoint-large) {
    font-size: 130%;
  }

  @media all and (min-width: $breakpoint-extra-large) {
    font-size: 150%;
  }
}