对于网站，我需要能够根据用户的屏幕分辨率动态显示背景图像。
即当页面开始加载时，在<head>一个小的javascript加载中，它通过css将页面的背景设置为http://example.com/backgrounds/beach_800x600，其中800和600是通过javascript确定的屏幕分辨率。
我正在为最常见的屏幕分辨率创建各种已调整大小的图像，因此对于大多数人来说，屏幕分辨率与现有图像完全匹配。如果没有完全匹配，例如，如果用户具有没有现有图像的屏幕分辨率AxB，则将创建图像＆amp;动态调整为AxB，并将提供服务。从那时起，任何分辨率为AxB的人都将获得该图像。
我的问题是：
1）这是一种安全的方法吗？即我不希望为自定义屏幕分辨率创建超过50个自定义大小的图像。我能用这种方法留在那个球场吗？使用这种方法我还应该注意其他任何安全隐患吗？
2）我应该给它一个50或100像素的误差范围，所以如果有人的分辨率是700x900，而我没有那个，但我有600x800或者我有800x1000，那么我会服务那些现有的图像而不是而不是创造新的？如果是这样，我应该将边距设置为100像素还是更好的数字？
答案 0 :(得分：1)
您可能不希望为每个屏幕分辨率创建图像，并且您可能希望将其基于浏览器窗口大小 - 而不是屏幕分辨率。鉴于窗口可能是任何大小，您可能需要重新考虑这个。
这也可以使用CSS3媒体选择器轻松完成，而不是JavaScript（尽管也可以使用JavaScript完成）。
有关媒体查询的一些信息，请参阅此处http://webdesignerwall.com/tutorials/css3-media-queries
答案 1 :(得分：1)
通过使用CSS3媒体查询和background-size属性，除了与过时浏览器的兼容性之外，几乎不需要JS。
Here's a link详细了解background-size。无论用户的分辨率如何，此属性都允许您以各种方式缩放图像。有时这可能不太理想。
And so we have CSS3 Media Queries。使用这些，您可以定位某些分辨率（或大于或小于某些分辨率），并告诉浏览器您要相应显示哪个图像（甚至是如何显示它，有或没有background-size）。