I want to change background color when change scre

问题:

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

For example:

• At lg size, background-color will be red
• At sm size, background-color will be pink

回答1:

You can just use 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