レスポンシブのブレイクポイント

モバイルファースト前提。min-width ベースで記述する。

推奨ブレイクポイント

/* ── ベース：スマホ（〜599px） ── */
/* デフォルトスタイルとして記述 */

/* ── タブレット縦（600px〜） ── */
@media screen and (min-width: 600px) { }

/* ── タブレット横 / iPad Pro（960px〜） ── */
@media screen and (min-width: 960px) { }

/* ── PC（1200px〜） ── */
@media screen and (min-width: 1200px) { }

/* ── ワイドPC（1600px〜） ── */
@media screen and (min-width: 1600px) { }

SCSS での変数管理（推奨）

// _variables.scss
$bp-tab:   600px;
$bp-pc:    960px;
$bp-wide: 1200px;

// mixinにまとめると管理しやすい
@mixin tab  { @media screen and (min-width: $bp-tab)  { @content; } }
@mixin pc   { @media screen and (min-width: $bp-pc)   { @content; } }
@mixin wide { @media screen and (min-width: $bp-wide) { @content; } }

/* 使用例 */
.block__title {
  font-size: 14px;       /* スマホ */
  @include tab  { font-size: 16px; }
  @include pc   { font-size: 20px; }
}

旧記法（max-width）との違い

旧来の max-width 記法は PC ベースで書き下ろしていくデスクトップファースト。現在は Googleのモバイルファーストインデックスに合わせ、スマホ→PC の順で上書きする min-width 記法を標準とする。

/* 旧（非推奨） */
@media screen and (max-width: 639px)  { /* スマホ */ }
@media screen and (min-width: 640px) and (max-width: 959px) { /* タブレット */ }
@media screen and (min-width: 960px) { /* PC */ }