s.css

div {
  font-size: 2em;
}

.media-min-width:after {
  content: 'Min width (for mobile first)';
}
@media (min-width: 20em) {
  .media-min-width:after {
    content: 'Min width 20em';
  }
}
@media (min-width: 40em) {
  .media-min-width:after {
    content: 'Min width 40em';
  }
}
@media (min-width: 60em) {
  .media-min-width:after {
    content: 'Min width 60em';
  }
}

.media-gap-width:after {
  content: 'Gap width (for precision)';
}
@media (min-width: 20em) and (max-width: 40em) {
  .media-gap-width:after {
    content: 'Gap width 20em -> 40em';
  }
}
@media (min-width: 40em) and (max-width: 60em) {
  .media-gap-width:after {
    content: 'Gap width 40em -> 60em';
  }
}

.media-max-width:after {
  content: 'Max width (for desktop first)';
}
@media (max-width: 60em) {
  .media-max-width:after {
    content: 'Max width 60em';
  }
}
@media (max-width: 40em) {
  .media-max-width:after {
    content: 'Max width 40em';
  }
}
@media (max-width: 20em) {
  .media-max-width:after {
    content: 'Max width 20em';
  }
}

.media-min-height:after {
  content: 'Min height';
}
@media (min-height: 10em) {
  .media-min-height:after {
    content: 'Min height 10em';
  }
}
@media (min-height: 20em) {
  .media-min-height:after {
    content: 'Min height 20em';
  }
}
@media (min-height: 30em) {
  .media-min-height:after {
    content: 'Min height 30em';
  }
}

.media-gap-height:after {
  content: 'Gap height (for precision)';
}
@media (min-width: 10em) and (max-width: 20em) {
  .media-gap-height:after {
    content: 'Gap height 10em -> 20em';
  }
}
@media (min-width: 20em) and (max-width: 30em) {
  .media-gap-height:after {
    content: 'Gap height 20em -> 30em';
  }
}

.media-max-height:after {
  content: 'Max width (for desktop first)';
}
@media (max-height: 30em) {
  .media-max-height:after {
    content: 'Max width 30em';
  }
}
@media (max-height: 20em) {
  .media-max-height:after {
    content: 'Max width 20em';
  }
}
@media (max-height: 10em) {
  .media-max-height:after {
    content: 'Max width 10em';
  }
}

.media-orientation:after {
  content: 'No orientation defined';
}
@media (orientation: portrait) {
  .media-orientation:after {
    content: 'Orientation: portrait';
  }
}
@media (orientation: landscape) {
  .media-orientation:after {
    content: 'Orientation: landscape';
  }
}

.media-resolution:after {
  content: 'Default resolution 1dppx';
}
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
  .media-resolution:after {
    content: 'Resolution 1dppx';
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .media-resolution:after {
    content: 'Resolution 1.5dppx';
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .media-resolution:after {
    content: 'Resolution 2dppx';
  }
}

.media-pixel-ratio:after {
  content: 'Default pixel ratio';
}
@media (-webkit-min-device-pixel-ratio: 1), (-moz-min-device-pixel-ratio: 1), (-o-min-device-pixel-ratio: 2 / 2), (min-device-pixel-ratio: 1) {
  .media-pixel-ratio:after {
    content: 'Pixel ratio: 1';
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (-moz-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
  .media-pixel-ratio:after {
    content: 'Pixel ratio: 1.5';
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device-pixel-ratio: 2) {
  .media-pixel-ratio:after {
    content: 'Pixel ratio: 2';
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (-moz-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
  .media-highres-shortcut:after {
    content: 'High res (shortcut)';
  }
}

@media (max-width: 40em) {
  body:after {
    content: "small";
    display: none;
  }
}
@media (min-width: 40em) {
  body:after {
    content: "medium";
    display: none;
  }
}
@media (min-width: 60em) {
  body:after {
    content: "large";
    display: none;
  }
}