不同的背景图像取决于屏幕分辨率？
您认为在不同屏幕分辨率下处理背景图像的最佳方法是什么？
我正在考虑为每个最流行的解决方案创建一个单独的背景，并让Jquery加载适当的一个。 我也对CSS开放，谢谢大家:)
使用媒体查询 ：
@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) } 您永远无法覆盖每个可能的大小，特别是当您考虑所有浏览器不是全屏的用户时，因此您的设计应该有一定的灵活性来解决这个问题。
更新：
对于跨浏览器支持，我在下面的答案是“自己动手”方法。 然而，在过去几年中，已经开发出一些优质的填料来解决这个问题。 与其中一个相比，通常是一个好主意，而不是重做所有的工作。 Respond.js是众所周知的之一。 只需链接到它：
然后在您的css文件中编写媒体查询，您就完成了。
正如robertc指出的那样，css媒体查询应该是你的起点，但应该指出的是，它们并不是解决这个问题的完整解决方案。 不幸的是，并非所有浏览器都支持css媒体查询（ 咳嗽 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解决方案，但同样，我完全支持媒体查询作为主要解决方案。 这是全屏链接。
有一个名为“backstretch”的jQuery插件，它可以拉伸背景图像以适应网页的大小。 看看这里
如果您只想获得屏幕分辨率然后决定将加载哪个背景，那么这些代码可能会有所帮助：
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("") }else{ alert("You have a strange screeen !") //--deal with undefined screen resolution here }
与css / inline 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; } }
Hello World