交换3个大小不同的徽标与媒体查询? [英] Swap out 3 differently-sized logos with media queries?

问题描述

我正在尝试根据不同的屏幕尺寸设置3种不同的徽标尺寸(small，med，big).这是我的代码:

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;
  }
}

这可以从big交换到med，但是不会再从med交换到small.为什么?

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

推荐答案

尝试在第二个媒体查询上也使用最小宽度.即使屏幕很小，第二个查询为true，最后一个css也具有首选项，因此它将加载第二个查询图像. 进行以下更改.

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;
  }
}

这篇关于交换3个大小不同的徽标与媒体查询?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！