Edit page

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.

NameValue in emValue in px*Usage in CSS**Usage in SCSS
xs0 em0 px--rui-breakpoint-xs@include breakpoint.up(xs)
sm36 em576 px--rui-breakpoint-sm@include breakpoint.up(sm)
md48 em768 px--rui-breakpoint-md@include breakpoint.up(md)
lg66 em1056 px--rui-breakpoint-lg@include breakpoint.up(lg)
xl84 em1344 px--rui-breakpoint-xl@include breakpoint.up(xl)
x2l90 em1440 px--rui-breakpoint-x2l@include breakpoint.up(x2l)
x3l120 em1920 px--rui-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.