[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)