Closed10

レスポンシブデザインのbreakpointsをどう設定しておくと良いのか考える

前提

Next, Chakra UIを使ってブログのデザインをするのにbreakpointsをどう設定するのが良いか悩んだので色々調べてみて、どう設定するか決めたい。

Nextでブログを構築するのに以下のChakra-UIを含んだテンプレートから開始しました。

https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript

その場合、breakpointsは以下のように設定されていました。

sm: '40em', // 640px
md: '52em', // 832px
lg: '64em', // 1024px
xl: '80em', // 1280px

あまり見慣れない数値で、本当にこれで良いの?と疑問に思ったので調べてみることにしました。

Chakra UIの場合

https://chakra-ui.com/docs/styled-system/theming/theme#breakpoints

Chakra UIだけpxじゃなくてemで比較しにくいのでpxに変換しておきます。ブラウザのデフォルト文字サイズ16pxを掛ければだいたいOKだと思います。

sm: '30em', // 480px
md: '48em', // 768px
lg: '62em', // 992px
xl: '80em', // 1280px
'2xl': '96em', // 1536px

UIコンポーネントのbreakpointのデフォルト値についてまとめます。

Chakra UI Tailwind Bootstrap MUI Ionic
sm 480px 640px 576px 600px 576px
md 768px 768px 768px - [1] 768px
lg 992px 1024px 992px (md) 900px [1:1] 992px
xl 1280px 1280px 1200px (lg) 1200px [1:2] 1200px
2xl 1536px 1536px 1400px (xl) 1536px [1:3] -
脚注
  1. MUI (Material UI)は他のmdに該当するbreakpointがない ↩︎ ↩︎ ↩︎ ↩︎

感想

  • MUIは割とざっくりとしてる
  • sm、Chakra UIだけ小さめに設定されている
  • mdの768px、lgの992px、2xlの1536pxどこから出てきた数値?
  • xlの1280pxはHDの横幅に合わせた感じ?

次にデバイスベースで考えてみます。気が遠くなりそう…

なのでまとめて頂いている方がいらっしゃったのでこちらを参考にします。

https://hashimotosan.hatenablog.jp/entry/2020/12/06/182327

記事の結論としては520pxに1つ、960pxに1つで良いのではないかという感じ。

スマホ 320〜519px
タブレット 560〜959px
PC 960px以上

まとめていただいて本当にありがたいです。

ということで、そろそろまとめます。

Chakra UIのBreakpointを設定するcreateBreakpointsのTypeScriptの型で、sm, md, lg, xlの4つが必須になっていたので、それらをそれぞれ考えてみることにします。

また、Chakra UIのBreakpointはemが基本でpxで指定したい場合は2xlの指定も必要なので2xlについても考えます。

ということで、UIコンポーネントのデフォルト値とデバイスの解像度をベースにした場合とどちらも考慮すると以下のような形が良いかなと思います。

sm: 520px
md: 768px
lg: 960px
xl: 1280px
2xl: 1536px

これで一旦デザイン進めてみます。

このスクラップは2ヶ月前にクローズされました
作成者以外のコメントは許可されていません