html - 响应式设计，强调视网膜显示和桌面。 Sprite 和 JS : what to sacrifice?

Question

我会尽量总结一下。我正在开发一个 Web 应用程序，它需要:

• react 灵敏，侧重于台式机和 iPhone(视网膜显示屏)
• 支持所有现代浏览器以及 ie8 和 ie9
• 服务器高效，意思是: Sprite 中尽可能少的 JS 和尽可能多的图标

目标设备宽度/高度与目标像素比:

对于条件 CSS，我选择了目标像素比，而不是为特定平台和设备创建不同的布局或使用 safari 用户代理。所以我正在使用 @media (-webkit-min-device-pixel-ratio: 2) 加上我所有的响应式样式。

现在我正在尝试决定如何处理图像。

每个背景两张图片 vs 一张背景调整大小的图片

因为我想尽可能减少服务器请求，所以我使用 Sprite (4 或 5 个"template")而不是单独的 png(SVG 讨论是另一回事!)。但是 Background-size 不被 IE8 支持，我的很大一部分用户，所以它需要一个像 jquery.backgroundSize.js 这样的 JS 回退。 .

所以:

Is the combination of sprites, conditional background-size and a JS fallback for IE8 the best option, from a performance and good-practise point of view?

我没有发现关于这个特定(但现在很普遍)场景的其他问题。这不是一个讨论问题，我更想知道是否就如何处理这种情况达成了实际协议(protocol):Retina 显示、 Sprite 、IE 和 JS。

Answer 1

条件background-size不会是首选选项。如果您选择使用该属性为具有“正常”像素比的客户端使用高分辨率 Sprite ，您最终会得到比预渲染图像更低的图像质量，客户端缩放图形和传输比需要大 4 倍的 Sprite 的额外计算开销。通过依赖 background-size您最终还会人为地限制您的网站与旧版浏览器的兼容性，而 IE8 JS 回退也可能会引入内容闪烁(无论您的场景是否可接受)。

我会使用每个像素比率的预渲染版本(因此您最终会得到两倍的图像文件)。您将能够为用户提供比 background-size 质量更好的图形。曾经可以。如果您手动构建 sprite(而不是使用自动化工具生成它们和随附的 CSS)，这会引入维护开销，但该解决方案总体上更可取。

1. 制作一个高 dpi 版本的 css 文件，例如main-highdpi.css 和 有条件地 将其包含在与 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="main-highdpi.css" /> 类似的适当媒体查询中

2. 创建您依赖的 sprite 的高分辨率版本并更新 CSS sprite 引用。我认为首选命名约定尚未达成一致(在资源名称后缀 @2x 似乎很流行，例如 main.png & main@2x.png)

3. 利润!

我会提倡这种方法，因为光栅图像的渲染质量更高(与使用 background-size 缩放相反)、没有兼容性问题和更快的客户端渲染。缺点是传输更大的图像文件，这是在客户端设备上获取高分辨率图像的可接受价格(并且无论如何都会缓存 Sprite )。至少您最终不会以 this article suggests 的形式请求两个副本。 !

请务必牢记各个设备的限制(图像大小和维度等)。