确认视网膜显示图像命名约定和实现答案

【问题标题】：Confirmation on retina display images naming convention and implementation确认视网膜显示图像命名约定和实现
【发布时间】：2012-08-10 00:06:58
【问题描述】：

到目前为止，我所知道的是，在具有视网膜显示屏的 iOS 设备上，它会自动拾取标有“@2x”后缀的视网膜图像（无需任何编码，假设新的 chrome 也这样做）。如果我错了，请告诉我。我将很快在一个新站点上工作，并将尝试支持 macbook pro 的视网膜显示。我唯一的问题是我不想使用@2x 后缀，而是想使用我定义的东西。我知道我可以用媒体查询或 js 调用图像。 @ 符号在命令行中给我们带来了一些麻烦。无论如何，我想避免@2x。

我想确认我是否可以使用不同的后缀命名我的视网膜图像并使用媒体查询或 js 实现它。从理论上讲，它应该像以前对所有设备一样工作，但我不是这个主题的专家，所以我想要一些保证。

谢谢

【问题讨论】：

"假设新的 chrome 也这样做" 你为什么会这样假设？它不会做任何事情。 iOS 开发和 Web 开发在很多方面有着根本的不同。
@AlexWayne 那么他们说 chrome 支持视网膜是什么意思？
表示渲染可以处理页面上的1px是屏幕上的2px。这意味着文本或 SVG 等矢量内容以最大清晰度呈现。但这并不意味着有任何类型的自动资产交换。
明白了，谢谢解释
据我所知，“在配备 Retina 显示屏的 iOS 设备上，它会自动获取标有“@2x”后缀的 Retina 图像”只有在您开发原生 iOS 应用程序时才是正确的。它不适用于网页或网络应用程序。

标签： javascript jquery css media-queries retina-display

【解决方案1】：

浏览器没有像 iOS 那样通过显示 DPI 进行资产交换的“自动魔法”支持。因此，您可能认为围绕此存在的任何“标准”都不过是松散的约定。如果您想以不同于其他人的方式构建多 DPI 支持，那完全取决于您。

【讨论】：

所以你确认使用媒体查询或 js 会很好，我可以摆脱@2x 后缀？
现代浏览器中没有系统需要这种命名约定。这意味着这完全取决于你。如果您愿意，可以将-retina 附加到您的视网膜图像文件名。或者可能是.embiggenned 或者甚至在前面加上cromulent- 或snazzy-style___ 或spifferroonski。完全 100% 由您决定。