This is a robust, maintainable and scalable SASS media mixin that I have developed, that you can drop in to your scss files and then easily customise.
Add your own breakpoint values to the map at the top and then use anywhere in your code. Alter the breakpoints on a whim and watch the changes happen instantly on recompiling the SCSS.
You don’t need to worry about adding ‘screen’ to the media query as this is added by default but can be customised.
If you do want to see this being used with a different device type (print, tv, braile etc.), screen orientation or additional custom bug fix breakpoints, then see the below for some advanced usage example.