css - 我想在 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