최근에 진행하는 프로젝트에서 Material UI 라이브러리를 사용하면서 반응형 breakpoint 에 대한 기준점을 정리해보고자 한다.
Responsive breakPoint types
Material UI 에서 다루는 breakPoint 키워드는 아래와 같이 정의되어 있다.
- xs, extra-small: 0px
- sm, small: 600px
- md, medium: 900px
- lg, large: 1200px
- xl, extra-large: 1536px
하지만 가끔 이 정의된 표에 나와있는 값이 min-width 인지 max-width인지 헷갈려서 이렇게 따로 기록을 해보았다.
xs
가장 작은 스크린 장치에 적합한 반응형 breakPoint 이며, 적용 범위는 아래와 같다.
min-width: 0px
max-width: 599px
즉, xl 키워드에 대해 정의된 스타일 코드는 스크린이 0 ~ 599px 범위일 때, 작동한다고 볼 수 있다.
sm
7~9 인치 정도의 장치에 적합한 반응형 breakPoint 이며, 적용 범위는 아래와 같다.
min-width: 600px
max-width: 899px
즉, sm 키워드에 대해 정의된 스타일 코드는 스크린이 600 ~ 899px 범위일 때, 작동한다고 볼 수 있다.
md
9~11 인치 정도의 장치에 적합한 반응형 breakPoint 이며, 적용 범위는 아래와 같다.
min-width: 900px
max-width: 1199px
즉, sm 키워드에 대해 정의된 스타일 코드는 스크린이 900 ~ 1199px 범위일 때, 작동한다고 볼 수 있다.
lg
일반적으로 노트북 장치에 적합한 반응형 breakPoint 이며, 적용 범위는 아래와 같다.
min-width: 1200px
max-width:1536px
즉, xl 키워드에 대해 정의된 스타일 코드는 스크린이 1200 ~ 1536px 범위일 때, 작동한다고 볼 수 있다.
xl
일반적으로 데스크톱 잇아의 장치에 적합한 반응형 breakPoint 이며, 적용 범위는 아래와 같다.
`min-width: 1536px``
즉, xl 키워드에 대해 정의된 스타일 코드는 스크린이 1536px~ 범위일 때, 작동한다고 볼 수 있다.
