作記録

記憶代わり

Material designのbreakpoint systemについて

参考

material.io

まとめ

自分の言葉でまとめると下記のようになる。

画面サイズが0~599dp(extra small breakpoint ex: スマホ)

bodyは画面サイズに合わせて広がる。
marginは16dpで固定。
カラム数は4。

画面サイズが600~904dp(small breakpoint ex: タブレット)

bodyは839dpまで画面サイズに合わせて広がる(bodyが839dpになるのが画面サイズ904dp)。
marginは32dpで固定。
カラム数は8。

画面サイズが905~1239dp(small breakpoint ex: タブレット)

bodyは840dpで固定。
marginが199dpまで画面サイズに合わせて広がる(marginが200dpになるのが画面サイズ1240)。
カラム数は12。

画面サイズが1240~1439dp(mediam breakpoint ex: ノートパソコン)

bodyは画面サイズに合わせて広がる。
marginは200dpで固定。
カラム数は12。

画面サイズが1440dp~(large breakpoint ex: デスクトップパソコン)

bodyは1040で固定。
marginはサイズに合わせて広がる。
カラム数は12。