jquery - 如果超过特定窗口大小，则交换 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');
  }
}

第一行设置为 600 像素及更小的屏幕。中间部分为 600px-1000px 的屏幕设置 CSS，最后几行适用于任何 1000px+ 的屏幕。

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