Html 使用媒体查询为视网膜显示器用户显示高分辨率徽标？

我有下面的HTML，我想采取和使用更高的分辨率图像视网膜显示通过CSS。我只是不知道如何做到这一点，或者如果我必须完全改变我的HTML以及

<a class="navbar-brand " href="/">
    <img src="/utilities/file_library/images/logo.jpg" alt="Store">
</a>

---

谢谢。

不久前我自己也遇到了这个问题，我发现这篇文章在这方面提供了很多信息：

现在TLDR

• 通过像素大小比介质查询替换高分辨率像素

• 大多数人会在他们的网站上使用大量的图标，使用面部字体而不是图标

• 尽可能使用SVG图像

---

首先，您不能使用css更改图像源，因此徽标必须是背景图像。然后使用媒体查询为高dpi屏幕写入背景图像src

这是一篇关于这个主题的伟大文章-

---

然而如今，徽标的最佳解决方案是首先使用矢量图像（.svg），这在任何屏幕上都是完美的。

您不应该使用媒体查询以这种方式进行此操作。原因是，在每次加载页面时，您都会加载到图像的版本，这不是一个好主意

您可以在

.navbar brand

上将徽标设置为背景图像，这样您就可以在css中使用媒体查询来更改图像本身，并且只加载一个图像。在这种情况下，您将有两个版本的图像，但根据屏幕大小，只会加载一个

.navbar-brand {
  display: block;
  height: what-ever-height-px;
  width: what-ever-width-px
  background-image: '/utilities/file_library/images/logo.jpg';
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  .navbar-brand {
    background-image: '/utilities/file_library/images/logox2.jpg';
  }
}

---

更好的解决方案是使用SVG图标或SVG精灵，或者将图标变成字体

那很有趣。a href和所有这些如何处理背景图像？这听起来不是很传统。例如，您可以将您的JPG转换为SVG，因为它是一个徽标，以便给它更清晰的外观和感觉，更不用说从数学上来说它应该处理得更快。正如我在回答中提到的，你的网站中可能会有许多徽标/图标。你可以使用内容属性从CSS更改img源。你的媒体查询太长了

（-webkit-min-device-pixel ratio:2），（最小分辨率：192dpi）

将针对相同的设备，至少如果您仅添加

屏幕和

，以实现向后兼容性。