[Bootstrap] ブレイクポイント @media

2019年4月1日2021年9月8日

レスポンシブのブレイクポイント（Responsive breakpoints）の書き方。
レスポンシブサイトを作る際には必要不可欠な設定ですが、慣れないとなんともややこしい。

INDEX

考え方

min-widthと、max-widthの2つの書き方があります。

min-width: 576px と言う場合、ミニマムが576pxとなり、576px以上の場合に適応されます。
max-width: 576px と言う場合、マキシマムが576pxとなり、576px以下の場合に適応されます。

基本的な書き方

@media (min-width: 576px){
 #ここにCSS{　} 閉じカッコ忘れずに
}

サイズ別の書き方

各種メディアクエリ

/* 小さなデバイス （スマホ,576pxとそれ以上）*/
@media (min-width: 576px) { ... }

/*中間のデバイス (タブレット, 768px とそれ以上)*/
@media (min-width: 768px) { ... }

/* 大きなデバイス(デスクトップ, 992px とそれ以上)*/
@media (min-width: 992px) { ... }

/* もっと大きなデバイス (大型画面のPC, 1200px とそれ以上)*/
@media (min-width: 1200px) { ... }

/* とっても小さなデバイス  (小さなデバイス,576pxとそれ以下)*/
@media (max-width: 575.98px) { ... }

/* 小さなデバイス  (スマホ, 768pxとそれ以下)*/
@media (max-width: 767.98px) { ... }

/* 中間のデバイス(タブレット, 992pxとそれ以下)*/
@media (max-width: 991.98px) { ... }

/* 大きなデバイス (デスクトップ,1200pxとそれ以下)*/
@media (max-width: 1199.98px) { ... }