Arwes LogotypeArwes Logotext

Breakpoints

The breakpoints tools are a simplified version of the Material specification.

"A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation."

The breakpoints define 6 screen ranges with default values:

  • xs (extra small) of 0px.
  • sm (small) of 600px.
  • md (medium) of 960px.
  • lg (large) of 1280px.
  • xl (extra large) of 1920px.

They can be configured with different values optionally:

tsx
const theme = createTheme({
breakpoints: {
values: {
sm: 400,
md: 768
}
}
});

In this case, the small and medium breakpoints are updated.

These breakpoints values are used to create CSS media queries dynamically. The breakpoints functions can be executed in the components dynamic styles generation to add specific media queries.

Breakpoint Up

To create a media query from one breakpoint upwards:

tsx
theme.breakpoints.up('lg');
// '@media screen and (min-width: 1920px)'

Upwards large using default values.

Breakpoint Down

To create a media query from one breakpoint downwards minus 1:

tsx
theme.breakpoints.down('lg');
// '@media screen and (max-width: 1919px)'

Downwards large breakpoint using default values.

Only Breakpoint

To create a media query between the provided breakpoint and just before the next:

tsx
theme.breakpoints.only('sm');
// '@media screen and (min-width: 600px) and (max-width: 959px)'

From small to medium range using default values.

Between Breakpoints

To create a media query between two provided breakpoints:

tsx
theme.breakpoints.between('md', 'lg');
// '@media screen and (min-width: 960px) and (max-width: 1919px)'

From medium to large range using default values.