随着技术的不断进步，我们的手机、电脑等设备日益普及 Retina 屏幕。这种高清屏幕的出现让我们看到了更加清晰的画面，同时也给前端开发带来了新的挑战。在 Retina 屏幕上展示高清图片，需要我们在适配屏幕的同时，使用高清图片资源，才能达到更好的显示效果。
什么是 Retina 屏幕
Retina 屏幕是苹果公司推出的高分辨率显示技术，它的特点是在同样大小的屏幕上，像素点更加密集，显示更加细腻、清晰。例如 iPhone 6 的 Retina 屏幕，分辨率为 750 x 1334，而同样大小的屏幕分辨率可能只有 640 x 1136。
Retina 屏幕适配
为了适配 Retina 屏幕，我们需要使用 CSS 媒体查询来检测设备的像素比（Pixel Ratio），从而适配不同分辨率的屏幕。
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
/* Retina 屏幕 */
}在这段代码中，我们使用了 -webkit-min-device-pixel-ratio 和 min-device-pixel-ratio 两个媒体查询来检测设备的像素比是否大于等于 2，如果是则表示这是一台 Retina 屏幕的设备。在这个媒体查询中，我们可以设置 Retina 屏幕下的样式。
高清图片显示
在适配 Retina 屏幕的同时，我们还需要使用高清图片资源来展示清晰的图片。我们可以使用两种方法来实现高清图片的显示。
1. 使用 @2x 图片
在 Retina 屏幕上展示高清图片，最简单的方法就是使用 @2x 图片。@2x 图片是指在原来的图片基础上，将图片放大两倍，从而得到更高分辨率的图片。例如，一张 100 x 100 的图片，在 Retina 屏幕上展示时，需要使用一张 200 x 200 的 @2x 图片。
<img src="image@2x.png" alt="高清图片">
在这段代码中，我们使用了 @2x 图片来展示高清图片。在 Retina 屏幕下，浏览器会自动选择 @2x 图片来展示，从而实现高清图片的显示。
2. 使用 srcset 属性
除了使用 @2x 图片来展示高清图片，我们还可以使用 srcset 属性来实现高清图片的显示。srcset 属性可以让浏览器根据设备的像素比自动选择最佳的图片资源。
<img src="image.png" srcset="image@2x.png 2x" alt="高清图片">
在这段代码中，我们使用了 srcset 属性来展示高清图片。在 Retina 屏幕下，浏览器会自动选择 image@2x.png 这张图片来展示，从而实现高清图片的显示。
总结
适配 Retina 屏幕并实现高清图片显示，需要我们在 CSS 中使用媒体查询来检测设备的像素比，并使用 @2x 图片或者 srcset 属性来展示高清图片。通过这篇文章的学习，相信大家已经掌握了 Retina 屏幕适配和高清图片显示的方法，可以在开发中更好地应对 Retina 屏幕的挑战。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509575d95b1f8cacd412eef