媒体查询和背景图像

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

根据这个测试:

如果你想只图像的桌面版本,在桌面上下载...

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

您需要使用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;
  }
}