如果超过特定窗口大小，则交换div背景

Question

我的网站上有一个很大的横幅（背景为div）。我希望屏幕更大的人可以看到更高分辨率的版本。 我该怎么做？我需要JQuery吗？

Answer 1

这可以使用CSS3媒体查询来实现。媒体查询的工作方式是您可以为不同的屏幕大小设置不同的CSS。

在你的HTML中你有DIV，那就是HTML：

<div id="banner"></div>

你的CSS看起来有点像这样：

#banner{
  background-image:url('image_low_res.jpg');
}

@media (min-width: 600px){
  #banner{
    background-image:url('image_med_res.jpg');
  }
}

@media (min-width: 1000px){
  #banner{
    background-image:url('image_high_res.jpg');
  }
}

为屏幕600px和更小的屏幕设置的第一行。中间设置屏幕为600px-1000px的CSS，最后一行为1000px +。

这是一个很好的CSS3媒体查询教程：http://css-tricks.com/css-media-queries/

Answer 2

您可以使用jquery，或者使用Media查询来获取计划CSS解决方案。使用媒体查询，您可以检查窗口，设备宽度等等。

你可以尝试：

@media Screen (min-width:500px) { Background-image:url(x2.jpg) }