[TOC] # 产生原因 我们平时使用的图片大多数都属于位图（`png、jpg...`），位图由一个个像素点构成的，每个像素都具有特定的位置和颜色值： c 理论上，位图的每个像素对应在屏幕上使用一个物理像素来渲染，才能达到最佳的显示效果。 <br> 而在`dpr > 1`的屏幕上，位图的一个像素可能由多个物理像素来渲染，然而这些物理像素点并不能被准确的分配上对应位图像素的颜色，只能取近似值，所以相同的图片在`dpr > 1`的屏幕上就会模糊:  <br> <br> # 解决方案 为了保证图片质量，我们应该尽可能让一个屏幕像素来渲染一个图片像素，所以，针对不同`DPR`的屏幕，我们需要展示不同分辨率的图片。 <br> 如：在`dpr=2`的屏幕上展示两倍图`(@2x)`，在`dpr=3`的屏幕上展示三倍图`(@3x)`。  <br> <br> # 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); } } ~~~ <br> > 只适用于背景图 <br> <br> # image-set 使用`image-set`： ~~~ .avatar { background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x ); } ~~~ <br> > 只适用于背景图 <br> <br> # srcset 使用`img`标签的`srcset`属性，浏览器会自动根据像素密度匹配最佳显示图片： ~~~ <img src="conardLi_1x.png" srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x"> ~~~ <br> <br> # JavaScript拼接图片url 使用`window.devicePixelRatio`获取设备像素比，遍历所有图片，替换图片地址： ~~~ const dpr = window.devicePixelRatio; const images = document.querySelectorAll('img'); images.forEach((img)=>{ img.src.replace(".", `@${dpr}x.`); }) ~~~ <br> <br> # 使用svg `SVG`的全称是可缩放矢量图（`Scalable Vector Graphics`）。不同于位图的基于像素，`SVG` 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。  <br> 除了我们手动在代码中绘制`svg`，我们还可以像使用位图一样使用`svg`图片： ~~~ <img src="conardLi.svg"> <img src="data:image/svg+xml;base64,[data]"> .avatar { background: url(conardLi.svg); } ~~~ <br> <br> # 参考资料 [关于移动端适配，你必须要知道的](https://juejin.im/post/5cddf289f265da038f77696c)