Breakpoints
브레이크포인트(Breakpoint)는 반응형 웹 디자인에서 화면 크기나 해상도에 따라 레이아웃이나 스타일을 조정하기 위한 기준점을 설정하는 가이드입니다.
이를 통해 다양한 디바이스나 화면 너비에 최적화된 일관된 사용자 경험을 제공할 수 있습니다.
Variables
미디어쿼리를 통해 적용할 수 있습니다.
| Name | Viewport | Recommended Device | Query |
|---|---|---|---|
| --media-query-2xl | 1768 - 2560 | Larger desktops and external monitors | @media (min-width: 110.5rem) and (max-width: 160rem) |
| --media-query-xl | 1440 - 1767 | Laptop, small desktop | @media (min-width: 90rem) and (max-width: 110.438rem) |
| --media-query-lg | 1024 - 1439 | Large Tablets, small laptop | @media (min-width: 64rem) and (max-width: 89.938rem) |
| --media-query-md | 768 - 1023 | Tablets | @media (min-width: 48rem) and (max-width: 63.938rem) |
| --media-query-sm | 480 - 767 | Large smartphones, small tablets | @media (min-width: 30rem) and (max-width: 47.938rem) |
| --media-query-xs | 320 - 479 | Small smartphone | @media (min-width: 20rem) and (max-width: 29.938rem) |