material-ui breakpoints
const styles = theme => ({
root: {
padding: theme.spacing(1),
[theme.breakpoints.down('sm')]: {
backgroundColor: theme.palette.secondary.main,
},
[theme.breakpoints.up('md')]: {
backgroundColor: theme.palette.primary.main,
},
[theme.breakpoints.up('lg')]: {
backgroundColor: green[500],
},
},
});material ui breakpoints
value |0px 600px 960px 1280px 1920px
key |xs sm md lg xl
screen width |--------|--------|--------|--------|-------->
range | xs | sm | md | lg | xlgrid breakpoints material ui
Grid breakpoints Material-UI:
xs, extra-small: 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px
xl, extra-large: 1920px
The grid is based on a 12 column system meaning the screen at any
given point has 12 columns of available space. A grid item with sm=6
will take up half the screen (6 of 12 columns) at screen size small
and larger (width = 600px+).material ui breakpoints
xs, extra-small: 0px
sm, small: 600px // half screen in a 13 inch laptop
md, medium: 900px
lg, large: 1200px // appx pixels in a full hd 13 inch laptop
xl, extra-large: 1536pxCopyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
