使用媒体查询为Retina display用户显示高分辨率徽标

Question

我有以下HTML，我想通过CSS为视网膜显示器使用更高分辨率的图像。我只是不确定如何做到这一点，或者我是否必须完全改变我的HTML。

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

谢谢。

Answer 1

您不应该以这种方式使用媒体查询。原因是你将在每个页面加载图像的版本，这不是一个好主意。

而不是这样做，你可以设置你的标志作为.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精灵，或者将图标制作成字体。

Answer 2

不久前我自己也遇到过这种情况，我发现这篇文章在这个问题上提供了非常丰富的信息:

TLDR呢?

• 通过像素大小比媒体查询替代高分辨率像素

• 大多数人会在他们的网站上使用大量的图标，使用字体代替图标。

Answer 3

首先，你不能用css改变图像源，所以徽标必须是背景图像。然后使用媒体查询覆盖背景图像src为高dpi屏幕。

这里有一篇关于这个主题的好文章- https://css-tricks.com/snippets/css/retina-display-media-query/

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