【发布时间】：2012-05-18 00:01:48
【问题描述】：
在处理响应式和自适应布局时，处理图像（或精灵）的最佳方式是什么？我现在这样做的方式是使用媒体查询，该查询具有基于视口尺寸的条件图像选择。有没有更好的方法，为什么？
【问题讨论】：
标签： css media-queries css-sprites responsive-design
【发布时间】：2012-05-18 00:01:48
【问题描述】：
如果您希望 images 也成为 responsive（调整大小），那么 sprite 不是一个好主意。最好用作单个图像但如果图像不是responsive（调整大小），那么您可以用作 sprites 。
永远不要在任何响应元素的background 中给出sprites。 height & width 应该是固定的。
【讨论】：
-
我同意你所说的和我的假设，这是这些天所遵循的首选做法。我在这里提到的是，有没有一种方法可以根据所服务的屏幕的比例动态调整原始精灵的大小，并调整背景坐标以满足该尺寸。通过这个，我打算使图像可重复用于多维。此外，我了解此方法可能会在图像质量上有所妥协，因此不适用于高端解决方案。
Matt Wilcox 的自适应图像可能就是您所追求的。
它使用 Javascript 将用户的屏幕尺寸考虑在内，并根据可用尺寸提供缓存的调整大小的图像版本。
它基本上会寻找较小的缓存图像，如果找到则提供它们，如果没有则制作它们。
【讨论】：
-
这仍在使用@media 查询实现。我喜欢媒体查询的逻辑，它为不同的屏幕尺寸提供条件场景。但是必须为目标屏幕创建特定图像的事实是一个多余的过程，而且每次调用这些图像都是额外的开销。我的意思是，我试图找出一种方法（如果存在），在图像中创建的方式可以调整大小而不会失真，并且可以提供多种屏幕尺寸。
-
"然而这并不是一个真正的长期解决方案，尤其是因为 cookie 竞争条件和 CDN/代理缓存不兼容。我们真正需要的是一些标准化的方法来处理这个问题将来”。此段落在网站上退出 (adaptive-images.com/details.htm)。这个项目是一个非常有趣的方法和倡议，但是限制（只有 php，没有 CDN 和 cookie 依赖）足够大，可以忽略。
-
到目前为止，这是我发现的最好的方法，但是如果你同时在屏幕上提供不同尺寸的图像，它就会掉下来。我正在考虑构建自己的版本来考虑这一点，但这是迄今为止我发现的最好的版本。
你可以试试这个方法：Stretchy Sprites（说明和演示）- 不依赖background-size的纯HTML/CSS
【讨论】：
-
对于那些想要在自适应设计中使用 CSS sprites 的人来说，这是一个很好的解决方案。我仍在努力让我的大脑理解代码和原因，但如果它像你的例子一样有希望，我很乐意给你一个大男子主义的拥抱！
根据我的经验，响应式设计一半是制作动态/可调整大小的内容（弹性框、矢量/可缩放图像等），另一半是使用媒体查询 - 所以是的，其中一部分可以使用带有媒体查询的条件图像选择。
至于可缩放图片，您是在谈论需要保持高质量的图标/小图片还是大/用户上传的图片？
对于图标/小图像（例如您将放入 .png 图像精灵），我会尝试无限扩展的矢量图像：
- 图标字体（仅适用于单色图标，但可以使用 CSS 设置样式，因此非常易于使用）：
http://css-tricks.com/examples/IconFont/ http://fortawesome.github.com/Font-Awesome/#base-icons
所需软件：矢量图像编辑器（Adobe Illustrator、Inkscape）和字体编辑器（FontCreator、FontForge）。
- SVG - 使用起来有点棘手，但可以处理更复杂的图形。
需要的软件：矢量图编辑器（我推荐Adobe Illustrator） 这是一个完全可调整大小的 svg 页面示例，没有媒体查询： http://emacsformacosx.com/
矢量图形的优势在于它们可以在任何屏幕尺寸上工作，而且它们通常加载速度更快（文件尺寸更小），所以如果您认真考虑“响应式”，我会尝试在矢量中做所有事情。
可以这么说，这只是“冰山一角” - 如果您有具体问题，很乐意分享更多信息；我花了一段时间才弄清楚如何设置软件并实现上述跨浏览器（例如，4.0 以下的 Android 不支持 SVG，所以我仍然必须依赖 .png sprites，我编写了一个允许调整大小的 javascript 文件sprites - 类似于“stretchy sprites”帖子） - 如果您可以摆脱单色图标，这是图标字体的另一个优势。
【讨论】：
-
SVG 很棒，但是不支持浏览器的份额很大。你有什么想要推荐的 polyfill 吗？
-
您的评论“不支持的浏览器所占的份额很大”的依据是什么？支持（至少对于基本 SVG）很强大：caniuse.com/#search=svg 我担心的唯一不支持它的浏览器是 Android 2.3 及更低版本。为此我使用canvg polyfill：code.google.com/p/canvg
我最近查看了很多关于这个主题的材料。有很多方法可用，但都不是绝对的。我对所有静态图像（图像等）使用了背景图像（背景尺寸：包含或背景尺寸：封面）。然而，动态生成的图像很难以优雅的（非脚本）范例进行管理。因此，在审阅了许多脚本之后，我只是编写了自己的脚本。我希望这会有所帮助：
/**
* Retina image update script. Invoke with Retina.render().
* Retina.render() may be passed a selector for img selection.
* The default filter looks for img's with data-scale="retina".
* @param {string|function} expr A CSS selector expression or jQuery filter function.
* @return {boolean|collection} Returns false or (for Retina displays) the images updated.
* @author Joe Johnson
*/
(function(ns,$){
ns.Retina = {
render: (function(isRetina){
return isRetina ? function(expr){
var r1 = /retina/i, r2 = /\d{3}/,
filter = expr ? expr : function(){
return r1.test($(this).data("scale"));
};
return $("img").filter(filter).each(function(){
this.src = this.src.replace(r2,function(m){
return (parseInt(m,10)>=640 ? m : 2*m);
});
});
} : function(){ return false; };
})(ns.devicePixelRatio && (ns.devicePixelRatio > 1))
};
})(window,jQuery);
需要注意的是，您仍然需要依赖一些文件名约定（在这种情况下，r2 -- 正则表达式 -- 正在搜索图像 src 属性中的目录，其值基于维度 [img/blah /320/image.jpg 被更新为 img/blah/640/image.jpg]。已经有一个 src 目录包含大于 640 的图像将被跳过，因为我假设它们已经足够大Retina 显示屏（我使用它的网站在目录 /img/dir/320/、/img/dir/640 和 /img/dir/960 中有图像）。
【讨论】：