Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

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

INDEX

考え方

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

  1. min-width: 576px と言う場合、ミニマムが576pxとなり、576px以上の場合に適応されます。
  2. 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) { ... }

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる