結論
状態:-
閲覧数:2,719
投稿日: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 ～
ネットでよく見かけるブレイクポイント
上記とは異なるアプローチの仕方
具体例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));
}
}