作為一名前端開(kāi)發(fā)者，我們每天都在處理各種設(shè)備的屏幕適配問(wèn)題，尤其是在移動(dòng)端開(kāi)發(fā)中，不同設(shè)備的分辨率和屏幕密度差異巨大。為了確保我們所開(kāi)發(fā)的應(yīng)用在各類(lèi)設(shè)備上都能保持清晰、優(yōu)美的視覺(jué)效果，理解物理像素、邏輯像素、像素密度的概念，并合理使用 @2x、@3x 圖片資源是至關(guān)重要的。

1. 物理像素和邏輯像素的區(qū)別

首先，作為開(kāi)發(fā)者，我們必須理解設(shè)備的 物理像素 和 邏輯像素 之間的區(qū)別。

• 物理像素 是設(shè)備屏幕上的最小顯示單元，直接與設(shè)備的硬件相關(guān)。例如，iPhone 12 Pro 的物理分辨率為 1170x2532，這意味著屏幕實(shí)際包含了 1170 列和 2532 行的物理像素點(diǎn)。
• 邏輯像素 則是我們開(kāi)發(fā)過(guò)程中使用的虛擬單位，它通過(guò)設(shè)備的像素比（DPR，Device Pixel Ratio）映射到物理像素上。對(duì)于同樣的 1170x2532 分辨率，系統(tǒng)可能會(huì)用較少的邏輯像素來(lái)表示，便于我們統(tǒng)一設(shè)計(jì)和開(kāi)發(fā)。這就是為什么我們?cè)诰帉?xiě) CSS 或處理布局時(shí)，不必去關(guān)心每個(gè)設(shè)備的物理分辨率，而只需處理邏輯像素。

通過(guò)使用邏輯像素，操作系統(tǒng)可以自動(dòng)適配不同分辨率的屏幕，讓開(kāi)發(fā)者不必為每種設(shè)備單獨(dú)設(shè)計(jì) UI。然而，僅僅使用邏輯像素并不足以讓所有設(shè)備都顯示出清晰的圖片，這就是像素密度和多分辨率圖片的重要性。

2. 像素密度和設(shè)備像素比（DPR）

每個(gè)設(shè)備的屏幕都有不同的像素密度，通常以 PPI（每英寸像素?cái)?shù)）來(lái)表示。屏幕像素密度越高，顯示的內(nèi)容越清晰。在移動(dòng)端，像素密度從低分辨率屏幕的 160 PPI，到中等分辨率的 320 PPI，再到 Retina 顯示屏的 460 PPI 甚至更高。

為了解決不同像素密度設(shè)備上圖像顯示的問(wèn)題，操作系統(tǒng)引入了 設(shè)備像素比（DPR） 的概念。DPR 是邏輯像素到物理像素的映射比例。例如，DPR 為 2 的設(shè)備意味著每個(gè)邏輯像素會(huì)映射到 2x2 個(gè)物理像素，也就是四個(gè)物理像素，這就是 @2x 圖片的概念；同理，DPR 為 3 的設(shè)備每個(gè)邏輯像素對(duì)應(yīng) 9 個(gè)物理像素，就是 @3x。

3. 為什么我們需要 @2x 和 @3x 圖片？

作為開(kāi)發(fā)者，單單設(shè)計(jì)一套圖片資源已經(jīng)不夠了。假如我們只提供標(biāo)準(zhǔn)分辨率（@1x）的圖片，這些圖片在高像素密度設(shè)備上會(huì)顯得模糊，因?yàn)閳D像的物理像素不夠多，導(dǎo)致圖像拉伸時(shí)失去了細(xì)節(jié)。

@2x 和 @3x 圖片的引入 解決了這個(gè)問(wèn)題。它們專(zhuān)門(mén)為高像素密度設(shè)備設(shè)計(jì)，提供了更高的分辨率和更精細(xì)的細(xì)節(jié)。系統(tǒng)會(huì)根據(jù)設(shè)備的像素密度自動(dòng)選擇最合適的圖片資源，因此，我們需要為每個(gè)圖片資源準(zhǔn)備三種分辨率的文件：

• @1x：標(biāo)準(zhǔn)分辨率圖片，適用于低像素密度設(shè)備。
• @2x：適用于中等像素密度設(shè)備（如 Retina 屏幕設(shè)備）。
• @3x：適用于高像素密度設(shè)備（如 iPhone X、iPhone 12 Pro 等）。

這種圖片資源的多版本支持，確保了無(wú)論用戶(hù)使用的是什么設(shè)備，圖像都能保持清晰、精致的視覺(jué)效果。

4. 如何在項(xiàng)目中使用 @2x 和 @3x 圖片？

在日常開(kāi)發(fā)中，我們需要為每個(gè)圖片資源提供 @1x、@2x 和 @3x 三種分辨率的版本，并且按照一定的命名規(guī)則存放。通常情況下，圖片命名規(guī)則如下：

• image.png（標(biāo)準(zhǔn)分辨率圖片，適用于低密度屏幕）。
• image@2x.png（適用于 Retina 屏幕）。
• image@3x.png（適用于超高像素密度設(shè)備）。

我們?cè)诖a中只需要引用圖片的基礎(chǔ)名稱(chēng)，比如：

<img src="image.png" alt="example image">

系統(tǒng)會(huì)根據(jù)設(shè)備的像素密度自動(dòng)選擇最合適的圖片，比如在 Retina 設(shè)備上，它會(huì)加載 image@2x.png，而在高密度屏幕上，它則會(huì)加載 image@3x.png。

小程序中使用（uniapp）在 uniapp 中，可以通過(guò)類(lèi)似的方式處理圖片，但是系統(tǒng)不會(huì)像原生 iOS/Android 那樣自動(dòng)根據(jù)設(shè)備像素密度選擇 @2x 或 @3x 圖片。需要手動(dòng)管理這些不同分辨率的圖片。不過(guò)，可以根據(jù)屏幕像素密度來(lái)動(dòng)態(tài)選擇圖片，以確保高分辨率設(shè)備上圖片的清晰度。

使用條件判斷選擇圖片

你可以使用 uni.getSystemInfoSync() 來(lái)獲取設(shè)備的像素密度（DPR），并根據(jù) DPR 動(dòng)態(tài)選擇適合的圖片：

<template>
  <image :src="imageSrc" alt="example image"></image>
</template>


<script>
export default {
  data() {
    return {
      imageSrc: '/static/image.png' // 默認(rèn)圖片路徑
    };
  },
  mounted() {
    // 獲取設(shè)備信息
    const systemInfo = uni.getSystemInfoSync();
    const dpr = systemInfo.pixelRatio;


    // 根據(jù) DPR 設(shè)置圖片
    if (dpr >= 3) {
      this.imageSrc = '/static/image@3x.png';
    } else if (dpr >= 2) {
      this.imageSrc = '/static/image@2x.png';
    } else {
      this.imageSrc = '/static/image.png'; // 標(biāo)準(zhǔn)分辨率圖片
    }
  }
};
</script>

在這個(gè)例子中，mounted 生命周期鉤子會(huì)在組件加載時(shí)根據(jù)設(shè)備的 DPR（設(shè)備像素比）選擇合適的圖片資源。只需要提供不同分辨率的圖片，并確保路徑和命名規(guī)則正確即可。

簡(jiǎn)化方法：CSS 媒體查詢(xún)

如果是背景圖片，可以使用 CSS 媒體查詢(xún)來(lái)根據(jù)設(shè)備的 DPR 自動(dòng)選擇圖片：

.example-image {
  background-image: url('/static/image.png');
}


@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min--moz-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi) {
  .example-image {
    background-image: url('/static/image@2x.png');
  }
}


@media only screen and (-webkit-min-device-pixel-ratio: 3), 
       only screen and (min--moz-device-pixel-ratio: 3), 
       only screen and (-o-min-device-pixel-ratio: 3/1), 
       only screen and (min-device-pixel-ratio: 3), 
       only screen and (min-resolution: 288dpi) {
  .example-image {
    background-image: url('/static/image@3x.png');
  }
}

這可以自動(dòng)根據(jù)設(shè)備的像素比來(lái)切換背景圖片，不過(guò)這種方法更適合靜態(tài)背景圖片，不能直接用于 <image> 標(biāo)簽。

5. 實(shí)際開(kāi)發(fā)中的注意事項(xiàng)

• 資源管理：確保為每個(gè)圖片資源提供所有必要的分辨率版本，避免在高像素密度設(shè)備上使用低分辨率圖片造成模糊。
• 性能優(yōu)化：雖然提供高分辨率圖片可以確保視覺(jué)效果，但是需要控制圖片文件大小，避免加載過(guò)大的圖片影響應(yīng)用性能。使用適當(dāng)?shù)膱D片壓縮工具來(lái)優(yōu)化資源，同時(shí)保證圖片的清晰度。
• 響應(yīng)式設(shè)計(jì)：在做響應(yīng)式設(shè)計(jì)時(shí)，盡量使用矢量圖（如 SVG）來(lái)代替位圖，尤其是圖標(biāo)，這樣可以更好地適配不同的分辨率，減少多版本圖片的維護(hù)負(fù)擔(dān)。

6. 總結(jié)

作為前端開(kāi)發(fā)者，理解物理像素、邏輯像素和像素密度的概念，能幫助我們開(kāi)發(fā)出在各種設(shè)備上都具備優(yōu)秀顯示效果的應(yīng)用。@2x 和 @3x 圖片的使用是為了解決不同像素密度設(shè)備上的模糊問(wèn)題。