什么是物理像素，邏輯像素和像素密度，為什么在移動端開發(fā)時需要用到@3x, @2x 這種圖片？

以 iPhone XS 為例，當(dāng)寫 CSS 代碼時，針對于單位 px，其寬度為 414px & 896px，也就是說當(dāng)賦予一個 DIV 元素寬度為 414px，這個 DIV 就會填滿手機(jī)的寬度；

而如果有一把尺子來實(shí)際測量這部手機(jī)的物理像素，實(shí)際為 1242*2688 物理像素；經(jīng)過計算可知，1242/414=3，也就是說，在單邊上，一個邏輯像素=3 個物理像素，就說這個屏幕的像素密度為 3，也就是常說的 3 倍屏。

對于圖片來說，為了保證其不失真，1 個圖片像素至少要對應(yīng)一個物理像素，假如原始圖片是 500300 像素，那么在 3 倍屏上就要放一個 1500900 像素的圖片才能保證 1 個物理像素至少對應(yīng)一個圖片像素，才能不失真。

當(dāng)然，也可以針對所有屏幕，都只提供最高清圖片。雖然低密度屏幕用不到那么多圖片像素，而且會因?yàn)橄螺d多余的像素造成帶寬浪費(fèi)和下載延遲，但從結(jié)果上說能保證圖片在所有屏幕上都不會失真。

還可以使用 CSS 媒體查詢來判斷不同的像素密度，從而選擇不同的圖片:

my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
?#my-image { background: (high.png); }

}