ブレークポイント

組み込みのブレークポイントを使用すると、レスポンシブレイアウトを簡単に構築できます。

利用可能なサイズ

各ブレークポイントは、固定の画面幅に対応します。値は min-width ベースで、画面幅が等しいかそれ以上のときに適用されます。

使用方法

ほとんどのコンポーネントのサイズとレイアウトのプロパティは、ブレークポイント全体で指定されたプロパティを変更するための追加の Responsive オブジェクトシェイプを受け入れます。

各サイズは対応するキーにマッピングされ、各値は画面サイズが指定されたブレークポイント以上になった場合に適用されます。

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