在小屏幕上显示小尺寸徽标，在更大屏幕上显示更大尺寸 - 正确的方法

Question

我知道之前已经回答过类似的问题。但我无法弄清楚哪种方法最好。我发现有两种方法：

1. 使用img标记并获取两张图片，一张用于小尺寸，另一张用于大尺寸。在大屏幕上隐藏小尺寸徽标，反之亦然。

2. 使用css背景和媒体查询为不同的分辨率提供不同的徽标网址。

但这是实现这一目标的更标准方法。在SEO方面，我认为使用img标签至少可以更好地展示您网站的徽标。但就性能而言，您总是需要下载一个额外的图像，从而产生另外一个请求。

除了这两种方式之外，还有其他任何可能的方式我都会丢失吗？

Answer 1

使用媒体查询

响应式设计始终意味着使用@media查询通过CSS选择性地定位设备屏幕大小和方向。您可以获得流畅的媒体查询体验。 Firefox，Safari（包括移动），Chrome和Opera都支持它。 Internet Explorer 9将支持它，但8及以下版本不支持它。对于那些不支持使用this等javascript技术的浏览器。

<强>更新

如果您关心服务器端组件，请使用adaptive images。否则，如果您关心双重请求，那么source shuffling适合您。

参考：我建议您阅读this。