1

对于一个站点，我需要能够根据用户的屏幕分辨率动态显示背景图像。

即当页面开始加载时，在<head>一个小的 javascript 加载中，通过 css 将页面的背景设置为类似于http://example.com/backgrounds/beach_800x600800 和 600 是通过 javascript 确定的屏幕分辨率。

我正在为最常见的屏幕分辨率创建各种调整大小的图像，这样对于大多数人来说，他们的屏幕分辨率将与现有图像完全匹配。如果没有完全匹配，例如，如果用户的屏幕分辨率AxB没有现有图像，则将动态创建图像并调整其大小AxB，并将其提供。从那时起，任何具有该分辨率的人都AxB将获得该图像。

我的问题是：

1）这是一种安全的方法吗？即，我不希望为自定义屏幕分辨率创建超过 50 个自定义大小的图像。我可以用这种方法留在那个球场吗？使用这种方法是否还有其他安全风险我应该注意？

2）我应该给它一个误差范围是 50 还是 100 像素，所以如果有人的分辨率是 700x900，而我没有，但我有 600x800 或者我有 800x1000，那么我会提供这些现有图像而不是创建新图像那些？如果是这样，我应该将边距设置为 100 像素还是有更好的数字？

4

2 回答 2

1

您可能不想为每个屏幕分辨率创建一个图像，并且您可能希望基于浏览器窗口大小而不是屏幕分辨率。鉴于窗口几乎可以是任何大小，您可能需要重新考虑这一点。

这也可以使用 CSS3 媒体选择器轻松完成，而不是 JavaScript（尽管也可以使用 JavaScript 完成）。

有关媒体查询的一些信息，请参见此处http://webdesignerwall.com/tutorials/css3-media-queries

于 2012-08-31T17:37:07.500 回答
1

通过使用 CSS3 媒体查询和background-size属性，除了与过时的浏览器兼容之外，几乎不需要 JS。

这是一个链接，其中包含有关background-size. 此属性允许您以各种方式缩放图像，而不管用户分辨率如何。有时这可能并不理想。

所以我们有 CSS3 媒体查询。有了这些，您可以针对某些分辨率（或大于和小于某些分辨率）并告诉浏览器您想相应地显示哪个图像（甚至如何显示它，有或没有background-size）。

于 2012-08-31T17:38:21.900 回答