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

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

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

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

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

2. 像素密度和設備像素比（DPR）

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

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

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

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

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

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

這種圖片資源的多版本支持，確保了無論用戶使用的是什么設備，圖像都能保持清晰、精致的視覺效果。

4. 如何在項目中使用 @2x 和 @3x 圖片？

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

• image.png（標準分辨率圖片，適用于低密度屏幕）。
• image@2x.png（適用于 Retina 屏幕）。
• image@3x.png（適用于超高像素密度設備）。

我們在代碼中只需要引用圖片的基礎名稱，比如：

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

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

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

使用條件判斷選擇圖片

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

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


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


    // 根據(jù) DPR 設置圖片
    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'; // 標準分辨率圖片
    }
  }
};
</script>

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

簡化方法：CSS 媒體查詢

如果是背景圖片，可以使用 CSS 媒體查詢來根據(jù)設備的 DPR 自動選擇圖片：

.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');
  }
}

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

5. 實際開發(fā)中的注意事項

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

6. 總結

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