ブレークポイントの設定

結論

以下の3分割で設定する。

デバイス	範囲（px）	補足
PC	1020～	インナー幅（設定値）以上～
タブレット	1020～768	インナー幅（設定値）～iPad幅まで
SP	767～320	iPadより小さい幅～iPhone SE幅まで

※インナー幅はデザインカンプから取得。

上記の数値で３分割する理由

以下のメリットがあるため。

• ブレークポイントは最低限の分割数に抑えたほうがメンテナンス性が高まる。
• タブレット、SPの範囲が広いが、この間は％やremを使って調整すれば対応可能。
• 実装の際に悩まなくなる。

ブレークポイントの実装方法

インナー幅を変数定義し、メディアクエリをmixinで用意しておくと楽。

// レイアウト幅
$layout-width-inner: 1180px;

// ブレークポイント
$breakpoints: (
  "sp": "screen and (max-width: 767px)",
  "tab": "screen and (max-width: #{$layout-width-inner - 1px})",
  "pc": "screen and (min-width: #{$layout-width-inner})",
);

// メディアクエリー
@mixin mq($breakpoint: sp) {

  @media #{map-get($breakpoints, $breakpoint)} {

    @content;
  }
}

ブックマーク

レスポンシブのブレークポイントの決め方！PCデザインカンプから再現する際のベスト

https://haniwaman.com/breakpoint/#a-top