カテゴリー:
レスポンシブ
閲覧数:708 配信日:2017-06-06 18:53
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));
}
}