javascript - 即时更改背景图像

Question

但是有人问过这个问题，并不是特别针对我要达到的效果....

我刚刚完成了 Javascript 类(class)，并为我的网站编写了一个小脚本。它使用 Gantry 框架并且在移动设备上运行得非常好。

如果您使用手机并将手机水平放置，它会调整该页面的大小，如果您随后将手机转为垂直状态，它会再次调整页面大小。

所以我写了这个

var cWIDTH = window.innerWidth;
if (cWIDTH < 640 ){
    document.getElementById("swapme").style.backgroundImage = "url('/images/backgrounds/top-image2.jpg')";
}

但是，它不会即时更改，例如..如果我转动手机，除非我刷新页面，否则它不会更改背景。我一直在我网站上的文件中寻找 Ajax/jQuery/JSON 代码，这些代码似乎对这种变化有反应，因此我可能会插入一个函数触发器。

但是，一旦页面加载，在您刷新页面之前变量是否已经设置好？

我如何即时获取变量并即时更改？

Answer 1

如前所述，您最好使用 CSS 媒体查询。
尝试这样的事情:

@media screen and (min-width: 641px) {
  #swapme {
    background-image: url('/images/backgrounds/top-image1.jpg');
  }
}

@media screen and (max-width: 640px) {
  #swapme {
    background-image: url('/images/backgrounds/top-image2.jpg');
  }
}