css - 用媒体查询交换 3 个不同大小的 Logo ？

Question

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

@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 .为什么？

Answer 1

也尝试在第二个媒体查询中使用最小宽度。即使屏幕很小，第二个查询也是正确的，最后一个 css 得到优先权，因此它加载第二个查询图像。进行以下更改。

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