Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

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

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

Bootstrap

レスポンシブのブレイクポイント(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) { ... }

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX