Bootstrap v4 で media queries breakpoints を指定する

既存の mixin を書き換えてみます。

概要

このような mixin を利用していた部分を、ディフォルトで用意されている mixin に書き換えられます。

Overview · Bootstrap

// Media Queries
$breakpoints: (
        'sm': 'screen and (min-width: 576px)',
        'md': 'screen and (min-width: 768px)',
        'lg': 'screen and (min-width: 992x)',
        'xl': 'screen and (min-width: 1200px)',
) !default;

@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

SCSS をこのように書き換えます。

.site-info {
  display: none;

  @include media-breakpoint-up(md) {
    display: flex;
  }
  //@include mq(md) {
  //  display: flex;
  //}
}

出力される CSS はこのようになります。

.site-info {
  display: none; }
  @media (min-width: 768px) {
    .site-info {
      display: flex; } }

この例であれば、横幅が 768px を越えた場合に display: flex; のスタイルが適用されます。

メディアクエリの使用 – CSS: カスケーディングスタイルシート | MDN

ポイント

Bootstrap の mixin 名の方が直感的でしょうか。

@include media-breakpoint-up(md) { ... } => @media (min-width: 768px) { ... }
@include media-breakpoint-down(md) { ... } => @media (max-width: 991.98px) { ... }
@include media-breakpoint-only(md) { ... } => @media (min-width: 768px) and (max-width: 991.98px) { ... }

breakpoints の初期値

ブレークポイントの初期値は、下記のように設定されているので、必要に応じて書き換えます。

Grid system · Bootstrap

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);