html - 使用媒体查询为 Retina Display 用户显示高分辨率 Logo ？

Question

我有以下 HTML，我想通过 CSS 获取并使用更高分辨率的图像用于 Retina 显示器。我只是不确定如何执行此操作，或者是否也必须完全更改我的 HTML。

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

谢谢。

Answer 1

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

您可以将 Logo 设置为 .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 Sprite ，或者将图标制作成字体。