React UI
Edit page
Home
Getting Started
Customize
Foundation
Breakpoints Colors Typography Icons Spacing
Components: UI
Components: Layouts
CSS Helpers
Readme

# 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-breakpoint-xs` | `@include breakpoint-up(xs)`
sm | 36 em | 576 px | `--rui-breakpoint-sm` | `@include breakpoint-up(sm)`
md | 48 em | 768 px | `--rui-breakpoint-md` | `@include breakpoint-up(md)`
lg | 66 em | 1056 px | `--rui-breakpoint-lg` | `@include breakpoint-up(lg)`
xl | 84 em | 1344 px | `--rui-breakpoint-xl` | `@include breakpoint-up(xl)`
xxl | 90 em | 1440 px | `--rui-breakpoint-xxl` | `@include breakpoint-up(xxl)`
xxxl | 120 em | 1920 px | `--rui-breakpoint-xxxl` | `@include breakpoint-up(xxxl)`

* 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 `$breakpoint-values` SCSS map.

Next: Colors →