如何使用 CSS 让它在视网膜屏幕上工作？

Question

代码如下：

<a href="http://localhost/link-a"><img src="a.png"></a>

图像文件 a.png 是 100x100，但在视网膜屏幕上它非常难看，所以我可以生成一个 2x PNG 文件。但是如何让它在这个 HTML 代码中工作？

Answer 1

最佳选择是使用适合所有分辨率的 svg 图片。

但是对于您当前的代码，您可以使用媒体查询

HTML:

<a href="http://localhost/link-a"><img src="a.png" class="normalDisplay"><img src="abiggerresolution.png" class="retinaDisplay"></a>

在你的CSS中：

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
   img.normalDisplay {
      display: none;
   }
    img. retinaDisplay {
      display: block;
   }
}

纯JS解决方案：

var retina = window.devicePixelRatio > 1;

if(retina) {

 document.querySelector("img.specifyclassname").src="mention your higher resolution image link";

}

另一种选择是：使用 retina.js link.

该脚本将检查您的服务器以查看您是否有任何以@2x 结尾的图像源。它将用更高分辨率的图像替换该图像。

Answer 2

如果您使用图标，我建议您使用 SVG。但是，如果你想使用图像，你可以使用 srcset 属性。

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">

参见can i use..

如何使用 CSS 让它在视网膜屏幕上工作？

How to use CSS to make this works on retina screen?

css

retina-display

retina