Question

我正在尝试根据不同的屏幕尺寸设置3种不同的徽标尺寸（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;
  }
}

Answer 2

您可以这样订购：

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

Answer 3

请参阅＆＃39; Overriding＆＃39;下的http://css-tricks.com/logic-in-media-queries/。

我认为正在发生的事情是第一和第二媒体查询都是真的，所以第二个是覆盖第一个;因此，永远不会达到切换到小的程度。

解决方案：将第一个媒体查询移动到最后一个...应该修复它并相应地进行调整。

使用媒体查询交换3个不同大小的徽标？

3 个答案:

CSS：