結論
状態:-
閲覧数:1,387
投稿日:2017-06-06
更新日:2017-06-06
2箇所へ設定
・600px
・960px
・600px
・960px
Material Design における Breakpoint system
「下記リンク先の上部」に掲載されているグラフ基準
「下記リンク先の下表」とは整合性が取れていないため、「上部に掲載されているグラフ」を参考にしている
・Responsive UI - Layout - Material design guidelines
xsmall
・0 ～ 600px
small
・600px ～ 960px
medium
・960px ～ 1280px
large
・1280px ～
ネットでよく見かけるブレイクポイント
検索してみた結果
2箇所へ設定する場合
・600px
・960px
3箇所へ設定する場合
・600px
・960px
・1280px
600pxの根拠は？
下記を比較して算出した区切りの数値
・モバイル端末の中で最も横幅が広いwidth
・タブレットの中で最も横幅が狭いwidth
上記とは異なるアプローチの仕方
現在の問題点
端末が多過ぎる
・今後も増加の一途
ブレイクポイントは端末サイズと切り離して考える
公開しているレイアウトを基準に考えていく手法
グリッドレイアウトの場合
・1グリッド内に配置するメイン画像サイズを決定
・width毎で、何カラムにするかを決定してく
具体例1.
1グリッド内に配置する画像
1画像に付き、4種類のサイズを用意
4種類
・450✕450
・200✕200
・100✕100
・84✕84
トップページ
使用画像は下記「両方」もしくは「一番下」
・200✕200
・84✕84
カラム数
・1～4
・widthに応じて変更
考え方
・端末のことは未考慮
・widthを可変していき、どのサイズでもレイアウト崩れがないよう設定
@media (max-width: 1500px) {
.sorted_table__col {
width: calc(25% - (25px + 25px / 4));
}
}
@media (max-width: 950px) {
.sorted_table__col {
width: calc(33.33333% - (25px + 25px / 3));
}
}
@media (max-width: 750px) {
.sorted_table__col {
width: calc(50% - (25px + 25px / 2));
}
}
@media (max-width: 500px) {
.sorted_table__col {
width: calc(100% - (25px + 25px / 1));
}
}