html - 使用媒体查询显示 Retina 显示用户的高分辨率 logo?

  显示原文与译文双语对照的内容
0 0

我有下面的HTML,我想采用一个更高分辨率的图像,通过CSS显示 Retina 显示器。 我只是不确定如何做,或者如果我必须完全改变 HTML 。


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

谢谢你。

时间: 原作者:

0 0

你不应该使用媒体查询来这样做。 原因是你将在每个页面负载中加载到图像的版本,这不是一个很好的主意。

你可以用 logo 来设置你的,这样你就可以在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,或者将你的图标变成一个字体。

0 0

我以前遇到过这个问题,我发现这篇文章在这个问题上非常有用: css-techniques-for-retina-displays

现在 TLDR?

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

  • 大多数人会在他们的站点中使用大量的图标,使用面字体代替图标。

  • 可以随时使用SVG图像。

原作者:
0 0

首先,你不能使用css更改图像源,因这里 logo 必须是实例的background 映像。 然后使用媒体查询ovewrite的background 图像源。

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

然而的最佳解决方案是在第一个屏幕上使用矢量图像,它在任何屏幕上都是完美的。

...