css - Bootstrap 3で画面サイズ変更時に背景色を変更したい

Question

ブートストラップ3を使用しています。背景が赤透明のヘッダーを持っていますが、画面サイズの変更に合わせて変更したいです。

例えば：

• lg サイズでは、背景色は赤になります
• smサイズは背景色がピンクになります

Answer 1

メディアクエリを使用できます

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    h1 {
        background: rgba(255, 0, 0, 0.5);     /* transparent red */
    }
}

/* Anything Smaller than Large  */
@media (max-width: 1199px) {
    h1 {
        background: rgba(255, 192, 203, 0.5); /* transparent pink */
    }
}

jsフィドル