交换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，也可以使用媒体查询进行计划CSS解决方案。使用媒体查询，您可以检查窗口，设备宽度等。

您可以尝试：

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