Breakpoints
Breakpoints are markers within Modes UI that define how the library’s components will adapt to different screen sizes, ensuring a responsive and seamless user experience. They are set at specific widths where the library’s layout and components will adjust to accommodate varying display dimensions, from mobile devices to large desktop screens.
| Token | Range | Usage |
|---|---|---|
media-query-xx-small |
0 – 319px | @media screen and (max-width: 319px) { } |
media-query-x-small |
320px - 575px | @media screen and (max-width: 576px) { } |
media-query-small |
576px - 991px | @media screen and (max-width: 992px) { } |
media-query-medium |
992px - 1219px | @media screen and (max-width: 1220px) { } |
media-query-large |
1220px - 1439px | @media screen and (max-width: 1440px) { } |
media-query-x-large |
1440px - | @media screen and (min-width: 1440px) { } |