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

Question

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

1. 使用img 标签获取两张图片，一张是小尺寸的，一张是大尺寸的。在大屏幕上隐藏小尺寸 Logo ，在小尺寸屏幕上则相反。

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

但这是实现此目标的更标准方法。在 SEO 方面，我认为使用 img 标签至少在显示您网站的 Logo 方面更好。但就性能而言，您总是需要下载一张额外的图像，从而导致多一个请求。

除了这两种方式，还有没有其他方式可能是我遗漏的呢？

Answer 1

使用媒体查询

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

更新:

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

引用:推荐阅读this .