1、产生原因♥☺☹★♠♥♣♧

    我们平时使用的图片大多数都属于位图（ png、jpg...），位图由一个个像素点构成的，每个像素都具有特定的位置和颜色值：

理论上，位图的每个像素对应在屏幕上使用一个物理像素来渲染，才能达到最佳的显示效果。

而在 dpr>1的屏幕上，位图的一个像素可能由多个物理像素来渲染，然而这些物理像素点并不能被准确的分配上对应位图像素的颜色，只能取近似值，所以相同的图片在 dpr>1的屏幕上就会模糊:

♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥

2、解决方案♥☺☹★♠♥♣♧

为了保证图片质量，我们应该尽可能让一个屏幕像素来渲染一个图片像素，所以，针对不同 DPR的屏幕，我们需要展示不同分辨率的图片。

如：在 dpr=2的屏幕上展示两倍图 (@2x)，在 dpr=3的屏幕上展示三倍图 (@3x)。

    media媒体查询

使用 media查询判断不同的设备像素比来显示不同精度的图片：

       .avatar{            background-image: url(conardLi_1x.png);        }        @media only screen and (-webkit-min-device-pixel-ratio:2){            .avatar{                background-image: url(conardLi_2x.png);            }        }        @media only screen and (-webkit-min-device-pixel-ratio:3){            .avatar{                background-image: url(conardLi_3x.png);            }        }

只适用于背景图

    image-set

    使用 image-set：

.avatar {    background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x );}

只适用于背景图

    srcset

使用 img标签的 srcset属性，浏览器会自动根据像素密度匹配最佳显示图片：

    JavaScript拼接图片url

使用 window.devicePixelRatio获取设备像素比，遍历所有图片，替换图片地址：

const dpr = window.devicePixelRatio;const images =  document.querySelectorAll('img');images.forEach((img)=>{  img.src.replace(".", `@${dpr}x.`);})

    使用svg

    SVG的全称是可缩放矢量图（ ScalableVectorGraphics）。不同于位图的基于像素， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

    除了我们手动在代码中绘制 svg，我们还可以像使用位图一样使用 svg图片：

< style>"conardLi.svg">

< style>[removed][data]">

.avatar {
  background: url(conardLi.svg);
}