在stackoverflow上有很多这样的问题,但是我似乎找不到适合我情况的答案。

我为正在制作的学校项目制作了高清1920x1080的背景,并且我正在尝试使其适合所有分辨率。因此,我要做的是针对每个特定的分辨率调整该图像的大小,使我处于尴尬的位置进行编码,因为我不能使用jQuery,我不允许这样做。

我正在考虑使用screen.width属性,但是我也需要一个长度,因为我使用... x768解决方案具有多个背景。

有没有人能够告诉我如何根据用户的屏幕高度和宽度来改变我的身体背景?

非常感谢你,
米歇尔

最佳答案

您可以检查窗口宽度并根据结果更改背景。

var width = window.innerWidth;
var height = window.innerHeight;
var body = document.body;

if (width <= 1600 && height <= 1000) {
  body.style.background = "url(path/to/1600x1000.jpg)";
}
if (width <= 1400 && height <= 900) {
  body.style.background = "url(path/to/1400x900.jpg)";
}
// continue as desired


http://jsbin.com/wosaduho/1/

更好的是,使用一些媒体查询来减少所需的JavaScript。

@media screen and (max-width: 1600px) {
 .element {
   background: url(path/to/1600x1000.jpg);
 }
}
@media screen and (max-width: 1400px) {
 .element {
   background: url(path/to/1400x900.jpg);
 }
}

10-07 19:05
查看更多