レスポンシブのブレイクポイント(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) { ... }
Overview
Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive uti…
コメント ※ハンドルネームでお願いします