使用image-set()解决Retina屏图片显示问题

1. 前言

(1) 关于Retina

[1] 概念

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。

这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

[2] 工作方式

以MacBook Pro with Retina Display为例，工作时显卡渲染出2880x1800个像素，其中每四个像素一组，输出原来屏幕的一个像素显示的大小区域内的图像。

这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍，但对于特殊元素，如视频与图像，则以一个图片像素对应一个屏幕像素的方式显示。故不会产生Windows中分辨率提升使屏幕文字与图像变小，造成阅读困难的问题。这样在设计软件时只需将所有的UI元素的精细度都提高到原来的4倍就可以既保持了观看舒适度，又提高了显示效果。

(2) Retina显示问题

在普通屏中显示正常的图片，在Retina下会出现模糊。于是，我们期望Retina下显示更高分辨率的图像。

[1] 原解决方案

解决方案有img标签方法、javascript方法，还有Media Queries。

简单介绍下Media Queries是采用“device-pixel-ratio”媒体查询像素比来实现。详情参考：

英文原文：