4

在处理响应式和自适应布局时处理图像（或精灵）的最佳方法是什么？我现在这样做的方式是使用媒体查询，该查询具有基于视口尺寸的条件图像选择。有没有更好的方法，为什么？

4

5 回答 5

1

根据我的经验，响应式设计一半是制作动态/可调整大小的内容（弹性框、矢量/可缩放图像等），另一半是使用媒体查询——所以是的，其中一部分可以使用带有媒体查询的条件图像选择。

至于可缩放图像，您是在谈论需要保留高质量的图标/小图像还是大/用户上传的图像？

对于图标/小图像（例如您将放入 .png 图像精灵），我会尝试无限可扩展的矢量图像：

  • 图标字体（仅适用于单色图标，但可以使用 CSS 设置样式，因此非常易于使用）：

http://css-tricks.com/examples/IconFont/ http://fortawesome.github.com/Font-Awesome/#base-icons

所需软件：矢量图像编辑器（Adobe Illustrator、Inkscape）和字体编辑器（FontCreator、FontForge）。

  • SVG - 使用起来有点棘手，但可以处理更复杂的图形。

所需软件：矢量图像编辑器（我推荐 Adob​​e Illustrator）这是一个完全可调整大小的 svg 页面示例，没有媒体查询： http ://emacsformacosx.com/

矢量图形的优点是它们可以在任何屏幕尺寸上工作，而且它们通常加载速度更快（文件尺寸更小），所以如果你认真对待“响应式”，我会尝试在矢量中做所有事情。

可以这么说，这只是“冰山一角”——如果您有具体问题，很乐意分享更多信息；我花了一段时间才弄清楚如何设置软件并实现上面的跨浏览器（例如 4.0 以下的 Android 不支持 SVG，所以我仍然必须依赖 .png 精灵，我编写了一个允许调整大小的 javascript 文件sprites - 类似于“stretchy sprites”帖子） - 如果您可以摆脱单色图标，这是图标字体的另一个优势。

于 2012-05-31T18:20:18.617 回答
1

你可以试试这个方法：Stretchy Sprites (instructions & demo) - Pure HTML/CSS with no dependencybackground-size

于 2012-05-31T02:46:34.563 回答
1

如果您还想images成为responsive（调整大小），那sprite不是一个好主意。最好用作单个图像但如果图像不是responsive（调整大小），那么您可以用作 sprites 。

永远不要放弃任何响应元素sprites。background它height&width应该是固定的。

于 2012-05-09T13:03:51.017 回答
0

我最近回顾了很多关于这个主题的材料。有相当多的方法可用，但都不是绝对的。我对所有静态图像（图像等）使用了背景图像（背景尺寸：包含或背景尺寸：封面）。然而，动态生成的图像很难以优雅的（非脚本）范例进行管理。因此，在审阅了许多脚本之后，我只是编写了自己的脚本。我希望这有帮助：

/**
 * 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 中有图像。

于 2012-09-08T02:08:20.183 回答
0

Matt Wilcox 的自适应图像可能就是您所追求的。

http://adaptive-images.com/

它使用 Javascript 将用户的屏幕大小考虑在内，并根据可用的大小提供缓存的调整大小的图像版本。

它基本上会寻找较小的缓存图像，如果找到则提供它们，如果没有则制作它们。

于 2012-05-09T15:13:33.670 回答