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

Bootstrap

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

考え方

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) { ... }

ソース元

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください