我想在Bootstrap 3更改屏幕尺寸时更改背景颜色

Question

我使用bootstrap 3.我有一个透明红色背景的标题，但我想根据屏幕尺寸的变化进行更改。

例如：

• 大小为lg时，背景颜色为红色
• 在sm尺寸下，背景颜色为粉红色

Answer 1

您可以使用Media Queries

/* 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 */
    }
}

jsFiddle