2019年版 レスポンシブのブレークポイント数値

レスポンシブのブレークポイントを2-3年前と同じにしていませんか。
Webサイト制作で表示デバイスの多様化により、
端末切り替え型からリキッド型のレスポンシブに変化しています📱

2019年のブレークポイントを再検討してみました👨🏻
プロジェクトのデザイン・ターゲットなどで数値を微調整しますが、考え方は統一しています。

リキッドレスポンシブが主流になってから…実装の考えること多いですね〜💦

ブレークポイント Sassのmixin

ブレークポイント切り替えの数値と
Sassのmixinは以下のようにしています。

$sp320: 320px;
$sp: 375px; //デザインカンプの横幅
$tb: 760px;
$pc: 980px; //PCコンテンツ幅の最小値
$wide: 1400px; //PCのmax-widthの数値

//@include sp320{}
@mixin sp320 {
  @media (max-width: $sp320) {
    @content;
  }
}

//@include sp{}
@mixin sp {
  @media (max-width: $sp) {
    @content;
  }
}

//@include tb{}
@mixin tb {
  @media (min-width: $sp) and (max-width: $pc) {
    @content;
  }
}

//@include pc{}
@mixin pc {
  @media (min-width: $pc) {
    @content;
  }
}

//@include wide{}
@mixin wide {
  @media (max-width: $wide) {
    @content;
  }
}

それぞれのブレークポイントについて、
考えを説明していきますね。

小さいスマホ用 320px〜375px📱

スマホデザインカンプが横幅375pxの場合に設定

SPのデザインカンプは横幅320px幅
または375px幅で作成するパターンが多いと思います。
横幅が小さいスマホ用に縮小調整を指定する範囲となります。

見出しやナビゲーションのfont-sizeを小さくしたり、
余白の調整や小さいサイズのスマホでもコンテンツが溢れないように調整します。

スマホ用 375px〜759px🤳🏻

スマホデザインカンプが横幅320pxの場合は数値を320pxで指定

spとpcの間がタブレット指定。コンテンツ部分はSPをベースにfont-sizeやGridを調整。
SP320px幅とPCmax-widthは希望があれば指定する。

iPad、タブレット用 760px〜979px📱

768pxの1桁目を切り捨てした数値をブレークポイントに指定

SPをベースに余白の調整やコンテンツカラム数を変更します。
Webサイトではタブレット用デザインカンプが入らない場合が多いので、
余白の単位ベースを％指定にするとレスポンシブ対応がスムーズになります。
気になる箇所だけ個別に数値を指定します。

PC用 980px〜💻

PC用の指定です。コンテンツ幅を指定する場合が多いです。

PC Wide用 1400px🖥

見出しのfont-sizeを相対指定にした場合、どこまで拡大するか。
コンテンツ幅のmax-widthを指定するため、横幅最大の数値を関数指定します。

私のチームではこのようにしていますが、
他の現場でどんな指定を使ってらっしゃるか気になります👀