css - 媒体查询和背景图片

Question

我有一个div

<div id="page">

</div>

使用以下 CSS:

   #page {
    background: url('images/white-zigzag.png') repeat-x;
    }

    @media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

我注意到当我调整浏览器大小时，我看到了“移动”背景(很好)，但如果我返回并将浏览器调大，我以前的“大”背景并不总是会重新出现。

这是一个间歇性问题，但它经常发生，我认为我应该解决它。

有什么方法可以解决这个“背景图像不出现”的问题，或者有什么方法可以调整背景图像的大小，以便媒体查询“缩小”背景图像以适应新的尺寸吗？据我所知，没有(广泛的)方法来改变背景图像的大小......

Answer 1

根据 this test :

如果您希望仅将图像的桌面版本下载到桌面...

并且仅要在移动设备上下载的移动图像 -

您需要使用 min-width 声明来指定桌面图像的最小浏览器宽度...

和移动图像的max-width。

所以你的代码是:

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}