CSS media queries based on the breakpoint guidance published by the Material Design team. http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoint

material-design-breakpoints.css

  /* Material Design Adaptive Breakpoints */
  /*
    Below you'll find CSS media queries based on the breakpoint guidance
    published by the Material Design team. You can choose to use, customise
    or remove these breakpoints based on your needs.

    http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
   */

  /* mobile-small */
  @media all and (min-width: 0) and (max-width: 360px) and (orientation: portrait) { }
  /* mobile-large */
  @media all and (min-width: 361px) and (orientation: portrait) { }
  /* mobile-small-landscape */
  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
  /* mobile-large-landscape */
  @media all and (min-width: 481px) and (orientation: landscape) { }
  /* tablet-small-landscape */
  @media all and (min-width: 600px) and (max-width: 960px) and (orientation: landscape) { }
  /* tablet-large-landscape */
  @media all and (min-width: 961px) and (orientation: landscape) { }
  /* tablet-small */
  @media all and (min-width: 600px) and (orientation: portrait) { }
  /* tablet-large */
  @media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { }
  /* desktop-x-small-landscape */
  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
  /* desktop-x-small */
  @media all and (min-width: 0) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
  /* desktop-small-landscape */
  @media all and (min-width: 481px) and (max-width: 840px) and (orientation: landscape) { }
  /* desktop-small */
  @media all and (min-width: 481px) and (max-width: 840px) and (max-aspect-ratio: 4/3) { }
  /* desktop-medium-landscape */
  @media all and (min-width: 841px) and (max-width: 1280px) and (orientation: landscape) { }
  /* desktop-medium */
  @media all and (min-width: 841px) and (max-width: 1280px) and (max-aspect-ratio: 4/3) { }
  /* desktop-large */
  @media all and (min-width: 1281px) and (max-width: 1600px) { }
  /* desktop-xlarge */
  @media all and (min-width: 1601px) and (max-width: 1920px) { }
   

Thank you for this! It was exactly what I was looking for.

Is it normal that mobile-small-landscape and desktop-x-small-landscape are identical?

@media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape)

Did anyone write this in Sass?

Take note that Material Design calls out specific breakpoints at 480, 600, 840, 960, 1280, 1440, and 1600dp. It does not call for responsive behavior at all reference resolutions.

Also, breakpoints of 1024 and above are 16dp less than the actual reference resolution.

https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints