我想在Bootstrap 3上更改屏幕大小时更改背景颜色 [英] I want to change background color when change screen size at Bootstrap 3

问题描述

我正在使用引导程序3.我有一个带有透明红色背景的标题，但是我想根据屏幕尺寸的变化进行更改.

I'm using bootstrap 3. I have a header with transparent red background, but I want to change it according to screen size changes.

例如:

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

推荐答案

您可以只使用媒体查询

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

这篇关于我想在Bootstrap 3上更改屏幕大小时更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！