ブレークポイントの設定

ブレークポイントの設定

結論

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

デバイス範囲(px)補足
PC1020~インナー幅(設定値)以上~
タブレット1020~768インナー幅(設定値)~iPad幅まで
SP767~320iPadより小さい幅~iPhone SE幅まで

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

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

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

  • ブレークポイントは最低限の分割数に抑えたほうがメンテナンス性が高まる。
  • タブレット、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