レスポンシブWebサイトにおけるブレイクポイント

「下記リンク先の上部」に掲載されているグラフ基準

「下記リンク先の下表」とは整合性が取れていないため、「上部に掲載されているグラフ」を参考にしている
・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画像に付き、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));

  }

}

---

レスポンシブWebサイトにおけるブレイクポイント設定に正解はない