前提

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

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

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

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

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

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

'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',

Bootstrapの場合

xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px

xs, extra-small: 0px
sm, small: 600px
md, medium: 900px
lg, large: 1200px
xl, extra-large: 1536px

xs: 0px
sm: 576px
md: 768px
lg: 992px
xl: 1200px

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]	-

脚注

感想

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

記事の結論としては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

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