Breakpoints

Breakpoints (반응형 중단점)

내장된 중단점(breakpoint)을 이용해 적응형 레이아웃을 쉽게 만들 수 있어요.

출처: 문서

각 중단점은 고정된 화면 너비에 대응해요. 값은 min-width 기반이라 화면 너비가 해당 값 이상일 때 적용돼요.

대부분의 컴포넌트 크기·레이아웃 props는 Responsive 객체 형태를 추가로 받아서 중단점별로 해당 prop을 조절할 수 있어요.

각 크기는 대응하는 키에 매핑되며, 해당 키의 값은 화면 크기가 이름 붙은 중단점 이상일 때 적용돼요.

<Heading
  size={{
    initial: "3",
    md: "5",
    xl: "7",
  }}
/>