The primitives media object is deprecated for styling. Use the canonical typed media-query
entrypoints from @atlaskit/css instead. The CSS overview contains the
canonical styling guidance.
import { css } from '@atlaskit/css';
import type MediaAboveXs from '@atlaskit/css/at-rules/media-above-xs';
import { token } from '@atlaskit/tokens';
const styles = css({
padding: token('space.100'),
['@media (min-width: 30rem)' satisfies MediaAboveXs]: {
padding: token('space.200'),
},
});
| 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 |