ReactJS: Material ui breakpoints
Material uses the following set of breakpoints. You can customize the values of this breakpoint in the theme.
A breakpoint is the range of predetermined screen sizes that have specific layout requirements.
- xs (extra-small): 0px or larger
- sm (small): 600px or larger
- md (medium): 960px or larger
- lg (large): 1280px or larger
- xl (extra-large): 1920px or larger
The functions you asked about (up
, down
, between
) are helpers for creating media queries using the breakpoints defined in the theme.
Note: breakpoints.up()
and breakpoints.down()
also accept a number, which will be converted to pixels. This is not true of the other methods.
breakpoints.up(breakpoint | number)
Creates a min-width media query that targets screen sizes greater than or equal to the given breakpoint.
// Styles will be applies to screen sizes from "sm" and up[theme.breakpoints.up('sm')]: { // styles}
breakpoints.down(breakpoint | number)
Takes a breakpoint name and creates a max-width media query that targets screen sizes up to and including the given breakpoint.
Because this is inclusive, the max-width will be the value of the next breakpoint up.
// Styles will be applies to screen sizes from 0 up to and including "md"[theme.breakpoints.down('md')]: { // styles}
breakpoints.between(start, end)
Takes two breakpoint names, and creates a media query that targets screen sizes from the first breakpoint, up to and including the second breakpoint.
// Styles will be applies to screen sizes from "sm" up to// and including "lg"[theme.breakpoints.between('sm', 'lg')]: { // styles}
breakpoints.values
An object containing the breakpoint values defined in the theme
{xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920}
breakpoints.width(breakpoint)
This function is used to get the value of a specific breakpoint.
theme.breakpoints.width('sm') // => 600