Media queries can be applied through the media object.
| Media | Breakpoint | Query | Pixel Value |
|---|
media.above.xxs | xxs | @media all | 0px |
media.above.xs | xs | @media (min-width: 30rem) | 480px |
media.above.sm | sm | @media (min-width: 48rem) | 768px |
media.above.md | md | @media (min-width: 64rem) | 1024px |
media.above.lg | lg | @media (min-width: 90rem) | 1440px |
media.above.xl | xl | @media (min-width: 110.5rem) | 1768px |
media.only.xxs | xxs | @media (min-width: 0rem) and (max-width: 29.99rem) | 0px |
media.only.xs | xs | @media (min-width: 30rem) and (max-width: 47.99rem) | 480px |
media.only.sm | sm | @media (min-width: 48rem) and (max-width: 63.99rem) | 768px |
media.only.md | md | @media (min-width: 64rem) and (max-width: 89.99rem) | 1024px |
media.only.lg | lg | @media (min-width: 90rem) and (max-width: 110.49rem) | 1440px |
media.only.xl | xl | @media (min-width: 110.5rem) | 1768px |
media.below.xs | xs | @media not all and (min-width: 30rem) | 480px |
media.below.sm | sm | @media not all and (min-width: 48rem) | 768px |
media.below.md | md | @media not all and (min-width: 64rem) | 1024px |
media.below.lg | lg | @media not all and (min-width: 90rem) | 1440px |
media.below.xl | xl | @media not all and (min-width: 110.5rem) | 1768px |