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

jsFiddle