2. Breakpoints

프론트 작업할 때마다 헷갈려서 정리해보려 한다.

 

1. 초기값 

 

MUI 공식 문서에는 다음과 같이 정리되어있다.

 

• xs, extra-small : 0px
• sm, small : 600px
• md, medium : 900px
• lg, large : 1200px
• xl, extra-large : 1536px

2. 사용법

 

<Container sx={{
  display: 'flex', 
  flexDirection: {xs: 'column', sm: 'row'}}}
>
  {...children}
</Container>

 

위 예시는 다음과 같다.

 

• 0px to 599px - flexDirection : 'column'
• 600ox and up - flexDirection: 'row'

 

이걸 media query로 바꾸면

• @media (min-width: 0px) and (max-width: 599px) – flexDirection: ‘column’
• @media (min-width: 600px) – flexDirection: ‘row’

가 된다.

 

✅ 요약

 

xs 부턴 ~ 로 보이게 할 것 

sm 부턴 ~로 보이게 할 것 ... 

 

정도로 생각하면 편할 것 같다!