fix(breakpoints): support print media (#367)

Previous breakpoints defined mediaQueries like `screen and (max-width: 599px)`. This means that
all responsive layouts (using .xs, .sm, etc.) will not print properly since `@media print` is excluded
by the `screen and ...` breakpoint definitions.

Remove all `screen and ` @media prefixes; so the layouts will appear the same on both display and print devices.

Fixes #361.

Author: ThomasBurleson

src/lib/media-query/breakpoints/data/break-points.ts

@@ -14,63 +14,63 @@ export const RESPONSIVE_ALIASES = [
 export const DEFAULT_BREAKPOINTS: BreakPoint[] = [
   {
     alias: 'xs',
-    mediaQuery: 'screen and (max-width: 599px)'
+    mediaQuery: '(max-width: 599px)'
   },
   {
     alias: 'gt-xs',
     overlapping: true,
-    mediaQuery: 'screen and (min-width: 600px)'
+    mediaQuery: '(min-width: 600px)'
   },
   {
     alias: 'lt-sm',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 599px)'
+    mediaQuery: '(max-width: 599px)'
   },
   {
     alias: 'sm',
-    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959px)'
+    mediaQuery: '(min-width: 600px) and (max-width: 959px)'
   },
   {
     alias: 'gt-sm',
     overlapping: true,
-    mediaQuery: 'screen and (min-width: 960px)'
+    mediaQuery: '(min-width: 960px)'
   },
   {
     alias: 'lt-md',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 959px)'
+    mediaQuery: '(max-width: 959px)'
   },
   {
     alias: 'md',
-    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279px)'
+    mediaQuery: '(min-width: 960px) and (max-width: 1279px)'
   },
   {
     alias: 'gt-md',
     overlapping: true,
-    mediaQuery: 'screen and (min-width: 1280px)'
+    mediaQuery: '(min-width: 1280px)'
   },
   {
     alias: 'lt-lg',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 1279px)'
+    mediaQuery: '(max-width: 1279px)'
   },
   {
     alias: 'lg',
-    mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919px)'
+    mediaQuery: '(min-width: 1280px) and (max-width: 1919px)'
   },
   {
     alias: 'gt-lg',
     overlapping: true,
-    mediaQuery: 'screen and (min-width: 1920px)'
+    mediaQuery: '(min-width: 1920px)'
   },
   {
     alias: 'lt-xl',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 1920px)'
+    mediaQuery: '(max-width: 1920px)'
   },
   {
     alias: 'xl',
-    mediaQuery: 'screen and (min-width: 1920px) and (max-width: 5000px)'
+    mediaQuery: '(min-width: 1920px) and (max-width: 5000px)'
   }
 ];