Question

您认为在不同屏幕分辨率下处理背景图像的最佳方法是什么？

我正在考虑为每个最流行的分辨率创建单独的背景，并让Jquery加载适当的分辨率。我也对CSS开放，谢谢大家：）

Answer 1

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

您永远无法涵盖所有可能的尺寸，尤其是当您考虑所有浏览器不是全屏的用户时，因此您的设计应该flexible来解释这一点。< / p>

Answer 2

<强>更新

对于跨浏览器支持，我的回答是“自己动手”方法。然而，在过去几年中，已经开发出一些优质的填料来解决这个问题。与其中一个一起使用而不是重做所有工作通常是一个好主意。 Respond.js是众所周知的之一。只需链接到它：

<script src="/path/to/respond.js"></script>

然后在你的css文件中写下你的媒体查询，你就完成了。

正如robertc指出的那样，css媒体查询应该是你的起点，但应该指出的是，它们并不是解决这个问题的完整解决方案。遗憾的是，并非所有浏览器都支持css媒体查询（ cough IE）。这些浏览器将忽略css文件中的媒体查询代码。

除了css媒体查询，我还会考虑使用一个可以确定视口大小的备份javascript解决方案，然后只需在body标签中添加一个类。这个例子仅仅是为了简洁起见使用jquery：

function setImageClass() {
    switch(true) {
        case($(window).width()>600): $("body").removeClass("w200 w400").addClass("w600");
        break;
        case($(window).width()>400): $("body").removeClass("w200 w600").addClass("w400");
        break;
        default: $("body").removeClass("w400 w600").addClass("w200");
        break;
    }
}

$(document).ready(function() {
    setImageClass();
});

$(window).resize(function() {
    setImageClass();
});

顺便说一句，这些尺寸不太现实，只是为了便于在所有设备上进行测试。请记住，css媒体查询将被忽略，因此除了这些之外，您还需要为javascript设置的类设置规则：

.w200 { background:red }
.w400 { background:orange }
.w600 { background:yellow }

但是，当查询和j都工作时，您不希望2 css规则发生冲突，因此您的媒体查询应使用相同的名称（并在之后放置）。例如：

@media (min-width:200px) {
    .w200 {
        background:red;
    }
}
...

我提出了一个小提琴来表明这一点。这仅包括javascript解决方案，但同样，我完全支持媒体查询作为主要解决方案。 Here is the full screen link.

Answer 3

有一个名为“backstretch”的jQuery插件，它可以拉伸背景图像以适应网页的大小。只需看看here

如果您只想获得屏幕分辨率然后决定将加载哪个背景，那么这些代码可能有所帮助：

var h = screen.height;
var w = screen.width;

var BGList = {
    '1024-768': 'background-url-1.jpg',
    '1152-864': 'background-url-2.jpg',
    '1280-600': 'background-url-3.jpg'
}

var myBG = BGList[ w+'-'+h ];
if (myBG){
    document.write("<style> body {background:url('"+myBG+"')} </style>")
}else{
    alert("You have a strange screeen !") //--deal with undefined screen resolution here
}

Answer 4

仅使用CSS /内联backgroundImage的方法略有不同。 https://codepen.io/ajagad/full/dgVQoE

html,
body,
div,
section {
  width: 100%;
  height: 100%;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10vw;
}

.desktop,
.tablet {
  background-size: 0;
  background-repeat: no-repeat;
}

.mobile {
  background-size: auto;
  background-repeat: repeat;
}

@media screen and (min-width: 768px) {
  .desktop,
  .mobile {
    background-size: 0;
    background-repeat: no-repeat;
  }
  .tablet {
    background-size: auto;
    background-repeat: repeat;
  }
}

@media screen and (min-width: 1153px) {
  .mobile,
  .tablet {
    background-size: 0;
    background-repeat: no-repeat;
  }
  .desktop {
    background-size: auto;
    background-repeat: repeat;
  }
}

<div class="desktop" style="background-image:url(https://images.unsplash.com/photo-1539416090763-b4a25738b8b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9203d7004b743c877c085d1ab5e5e666&auto=format&fit=crop&w=1024&q=20)">
  <div class="tablet" style="background-image:url(https://images.unsplash.com/photo-1539495090708-ac6b6e8f4189?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fcd5125a6fb31fbf5676df78447626a0&auto=format&fit=crop&w=768&q=20)">
    <div class="mobile" style="background-image:url(https://images.unsplash.com/photo-1539453198476-931a0137f0d7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=27b5e72e4429c085796630e2bcfcfa18&auto=format&fit=crop&w=480&q=20)">
      <section>Hello World</section>
    </div>
  </div>
</div>

Answer 5

我的调用是堆叠具有不同背景的 div 层，您计划在不同条件下使用，并使用显示类在断点处在它们之间切换。请注意必要的样式，以便您自己将这些重叠在一起；这不是问题的范围。

<div id="content-box">
 yada yada
 <div id="bg-small-mobile" class="d-block d-sm-none"></div>
 <div id="bg-mobile" class="d-none d-sm-block d-md-none"></div>
 <div id="tablet" class="d-none d-lg-block d-xl-none"></div>
 <div id="laptop" class="d-none d-xl-block d-xxl-none"></div>
 <div id="desktop-hd" class="d-none d-xxl-block"></div>
 <div id="all-print" class="d-none d-print-block"></div>
</div>

使用ID为每一层设置背景图片和其他微调我不知道这是否是你要找的，但我想我会把它放在那里，这样你就可以在需要时使用它。

上面的代码没有经过验证没有拼写错误或没有其他错误，而只是为了说明这个概念。是的，我就是这么懒。

不同的背景图像取决于屏幕分辨率？

5 个答案: