什么是 Retina 屏幕？
Retina 是苹果公司推出的一种高清屏幕，它的分辨率比传统屏幕高出很多倍，例如 iPhone 6 的屏幕分辨率为 750x1334px，而 Retina 屏幕的分辨率为 1500x2668px。这种高分辨率的屏幕使得图像和文本显示更加清晰，但同时也带来了一些问题。
什么是 2 倍图？
在 Retina 屏幕上，由于像素密度比传统屏幕高出很多倍，因此需要使用高分辨率的图片来保证图片显示的清晰度。这些高分辨率的图片被称为 2 倍图，因为它们的分辨率是传统图片的两倍。
响应式图片实践
在响应式设计中，我们需要确保图片在不同屏幕尺寸和像素密度下都能够正确地显示。为了实现这个目标，我们可以使用以下两种方法：
1. 使用 srcset 属性
HTML5 引入了一个新的属性 srcset，它可以让浏览器根据屏幕的像素密度来选择合适的图片。例如：
<img src="image.jpg" srcset="image@2x.jpg 2x, image@3x.jpg 3x">
在这个例子中，浏览器会根据屏幕的像素密度来选择合适的图片。如果屏幕是 Retina 屏幕，它会自动选择 image@2x.jpg，如果屏幕是分辨率更高的屏幕，它会选择 image@3x.jpg。
2. 使用 CSS media queries
另一种方法是使用 CSS media queries 来选择不同的图片。例如：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.my-image {
background-image: url(image@2x.jpg);
}
}在这个例子中，我们使用 CSS media queries 来选择分辨率为 2 的 Retina 屏幕，并使用 image@2x.jpg 作为背景图片。如果屏幕分辨率更高，我们可以添加更多的 media queries 来选择更高分辨率的图片。
总结
在 Retina 屏幕和其他高分辨率屏幕上正确地显示图片是一个重要的问题。我们可以使用 srcset 属性或 CSS media queries 来解决这个问题。无论哪种方法，我们都需要提供高分辨率的图片来保证图片显示的清晰度。在实际开发中，我们应该根据具体的情况来选择合适的方法，并进行测试以确保图片在不同屏幕尺寸和像素密度下都能够正确地显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663e67fcd3423812e4ca0bb0