使用媒体查询替换三个不同尺寸的标志？

Question

我正在尝试根据不同的屏幕大小拥有三种不同的徽标尺寸（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。为什么？

- NaOH

Answer 1

尝试在第二个媒体查询中使用min-width。即使屏幕很小，第二个查询也为真，最后的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;
  }
}

- Shiva Avula

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

这里演示

- Ruddy

Answer 3

请参见：http://css-tricks.com/logic-in-media-queries/ 中的“覆盖”部分。

我认为发生的情况是第一个和第二个媒体查询都为真，因此第二个媒体查询覆盖了第一个；因此，从未达到切换到小型设备的点。

解决方案：将第一个媒体查询移动到最后一个... 应该可以解决问题并进行相应调整。

- ncf