Breakpoints
There are 7 CSS breakpoints to provide you maximum control over the responsive behavior of the layout of your app.
These breakpoint values are used throughout React UI, in components, or in helper classes. You can reuse them in your own CSS and components to create a seamless experience for your users.
| Name | Value in em | Value in px* | Usage in CSS** | Usage in SCSS |
|---|---|---|---|---|
| xs | 0 em | 0 px | --rui-dimension-breakpoint-xs |
@include breakpoint.up(xs) |
| sm | 36 em | 576 px | --rui-dimension-breakpoint-sm |
@include breakpoint.up(sm) |
| md | 48 em | 768 px | --rui-dimension-breakpoint-md |
@include breakpoint.up(md) |
| lg | 66 em | 1056 px | --rui-dimension-breakpoint-lg |
@include breakpoint.up(lg) |
| xl | 84 em | 1344 px | --rui-dimension-breakpoint-xl |
@include breakpoint.up(xl) |
| x2l | 90 em | 1440 px | --rui-dimension-breakpoint-x2l |
@include breakpoint.up(x2l) |
| x3l | 120 em | 1920 px | --rui-dimension-breakpoint-x3l |
@include breakpoint.up(x3l) |
* Supposed the root font size is 16 px.
* ⚠️ Consider CSS breakpoints as read-only:* because
CSS custom properties cannot be used inside media
queries (media query is not a CSS property), changing
their values will have no effect. If you need to adjust the breakpoint values,
you must override the $values SCSS map defined in
styles/settings/_breakpoints.scss.