springfield/media/css/cms/flare26-media-query-tokens.css at 8372e4d5c67d2cb104b71a53d3b746d8230d8cf7 · mozmeao/springfield · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* These @custom-media breakpoints set the following viewport sizes.
Note that the device type in parentheses is only for intuitive reference,
but not a guarantee since there is a wide range of devices with each
viewport size and users may resize their browsers to different sizes.

xs: < 600px (phones)
sm: 600px - 899px (tablets in portrait)
md: 900px - 1199px (tablets in landscape)
lg: 1200px - 1799px (laptops and desktops)
xl: > 1799px (big monitors)

Start with base styles (no media query) for mobile first design, then
add styles for larger viewports using --viewport-*-up media queries.

Use --viewport-* queries sparingly, to target a specific viewport size.

There are no --viewport-*-down queries to encourage mobile-first design.
*/

/* stylelint-disable at-rule-no-unknown */
@custom-media --viewport-sm-up (min-width: 600px);
@custom-media --viewport-md-up (min-width: 900px);
@custom-media --viewport-lg-up (min-width: 1200px);
@custom-media --viewport-xl-up (min-width: 1800px);

@custom-media --viewport-xs (max-width: 599px);
@custom-media --viewport-sm (min-width: 600px) and (max-width: 899px);
@custom-media --viewport-md (min-width: 900px) and (max-width: 1199px);
@custom-media --viewport-lg (min-width: 1200px) and (max-width: 1799px);
@custom-media --viewport-xl (min-width: 1800px);

@custom-media --viewport-below-md (max-width: 899px);
@custom-media --viewport-below-lg (max-width: 1199px);