[Bootstrap 4] Bootstrap v4 で media queries breakpoints を指定する

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

[markdown]

## 概要

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

> * [Overview · Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)

“`scss
// 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 をこのように書き換えます。

“`scss
.site-info {
display: none;

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

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

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

“`

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

> * [メディアクエリの使用 – CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)

## ポイント

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](https://getbootstrap.com/docs/4.0/layout/grid/#variables)

“`scss
$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
);
“`

[/markdown]