TakahiroNakamori

TakahiroNakamori

中森崇博(ナカモリタカヒロ)

04
 

ブレイクポイントはどうしたらいいのか?

【作成日】 2020/10/20 12:34  【更新日】 

ホームページをレスポンシブデザインで作る場合、ブレイクポイントを決める必要があるが、どうしたらいいか悩みます。

Bootstrapの場合

Bootstrap(v5.0.0-beta1) ではブレイクポイントを以下のようにしています。

BreakpointDimensions
X-Small(xs)0 – 576px
Small(sm)≧ 576px
Medium(md)≧ 768px
Large(lg)≧ 992px
Extra large(xl)≧ 1200px
Extra extra large(xxl)≧ 1400px
【引用】https://v5.getbootstrap.jp/docs/5.0/layout/breakpoints/ より

ページの横幅

画面の中央にページを表示させる場合の横幅を決めておく場合があります。

Breakpointwidth
X-Small(xs)100%
Small(sm)540px
Medium(md)720px
Large(lg)960px
Extra large(xl)1140px
Extra extra large(xxl)1320px

scss ファイル

_variables.scssコピーしました
// breakpoint -----
$breakpoint: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

// container-width -----
$container-width: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
) !default;