Swap out 3 differently-sized logos with media queries?

问题

I'm trying to have 3 different logo sizes (small, med, big) based on different screen sizes. Here's my code:

@media screen and (max-width: 487px) {
  .site-header .site-branding {
    background-image: url("../images/logo_small.png") !important; 
  }
}

@media screen and (max-width: 1079px) {
  .site-header .site-branding {
    background-image: url("../images/logo_med.png") !important;
  }
}

@media screen and (min-width: 1080px) {
  .site-header .site-branding {
    background-image: url("../images/logo_big.png") !important;
  }
}

This works swapping from big to med, but it won't swap again from med to small. Why?

回答1:

Try to use the min-width on the second media query also. Even when the screen is small the second query is true and the last css gets preference so its loading the second query image. Make the following change.

@media screen and (max-width: 487px) {
  .site-header .site-branding {
    background-image: url("../images/logo_small.png") !important; 
  }
}

@media screen and (min-width: 487px) and (max-width: 1079px) {
  .site-header .site-branding {
    background-image: url("../images/logo_med.png") !important;
  }
}

@media screen and (min-width: 1080px) {
  .site-header .site-branding {
    background-image: url("../images/logo_big.png") !important;
  }
}

回答2:

You can order it like this:

CSS:

@media screen and (min-width: 1080px) {
    .site-header .site-branding {
        background-image: url("../images/logo_big.png") !important;
        background: blue;
    }
}
@media screen and (max-width: 1079px) {
    .site-header .site-branding {
        background-image: url("../images/logo_med.png") !important;
        background: green;
    }
}
@media screen and (max-width: 487px) {
    .site-header .site-branding {
        background-image: url("../images/logo_small.png") !important;
        background: red;
    }
}

DEMO HERE

回答3:

See: http://css-tricks.com/logic-in-media-queries/ under 'Overriding'.

I think what is happening is both the first and second media queries are true, so the second one is overriding the first; thus, never reaching the point to switch to small.

Solution: move the first media query to be the final one... should fix it and adjust accordingly.

来源：https://stackoverflow.com/questions/21400065/swap-out-3-differently-sized-logos-with-media-queries

标签

css

css3

media-queries