为了保证图片质量，我们应该尽可能让一个屏幕像素来渲染一个图片像素，所以，针对不同 DPR的屏幕，我们需要展示不同分辨率的图片。
1、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); }
}
此方案只适用于背景图
2、image-set
.avatar { background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x); }
此方案只适用于背景图
3、srcset
使用 img标签的 srcset属性，浏览器会自动根据像素密度匹配最佳显示图片：
<img src="conardLi_1x.png" srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">
4、JavaScript拼接图片url
使用 window.devicePixelRatio获取设备像素比，遍历所有图片，替换图片地址：
const dpr = window.devicePixelRatio; const images = document.querySelectorAll(‘img‘); images.forEach((img)=>{ img.src.replace(".", ‘@${dpr}x.’);
})