Question

我想要使用以下HTML，并通过CSS为Retina Displays使用更高分辨率的图像。我只是不确定如何做到这一点，或者我是否必须完全改变我的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

我不久前遇到过这个问题，我发现这篇文章在这个问题上非常有用：css-techniques-for-retina-displays。

现在TLDR？

通过像素大小比率媒体查询替代高分辨率像素。
大多数人会在他们的网站上使用大量图标，使用面部字体而不是图标。
尽可能使用SVG图像。

Answer 3

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

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

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

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

3 个答案: