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

Question

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

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

2. 使用 css 背景，在媒体查询中为不同的分辨率提供不同的 logo url。

但这是实现这一目标的更标准方法。在搜索引擎优化方面，我认为使用img 标签至少对于显示您网站的徽标来说更好。但就性能而言，您总是需要下载一张额外的图像，从而导致多一个请求。

除了这两种方式之外，我还缺少其他方式吗？

Answer 1

使用媒体查询

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

更新：

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

参考：我推荐阅读this。