最近正在做前端的 UI，本來以為會是一件很簡單的事情，但一來二去也搞了整整一天。其中最讓我郁悶的是在了 PS 設置畫布尺寸的時候沒有做充分的調查，理解錯了同學口中的尺寸意義，導致 UI 畫完了才發現尺寸整整小了一圈😂怎麼辦？重畫唄～
因此記錄一下，方便日後回顧。
物理尺寸#
英寸#
英寸 (inch) 是衡量設備尺寸的常用單位
它代表的是螢幕對角線的長度
一英寸≈2.54cm
分辨率#
像素#
像素是螢幕的最小單位，所有圖片都是由無數個像素點構成。
像素應該是用來衡量尺寸的，像素點和尺寸成正比
螢幕分辨率#
分辨率即垂直和水平方向上的像素點數，例如
1080*1920
指具體設備的螢幕像素尺寸，一般我們所說的手機或者電腦等物理設備的分辨率的時候就是指螢幕分辨率
螢幕分辨率越高不代表螢幕越清晰，這還要取決設備的物理尺寸。換句話說，分辨率要和物理尺寸搭配才能體現清晰度，因為它直接能表現的是螢幕所能容納的總的像素點數，如果設備物理尺寸不同，比較分辨率應該意義不大。當然這裡的像素應該指的是物理像素，這點之後會提到。
這裡要記住的是螢幕分辨率 / 設備獨立像素 (邏輯像素) = 倍率（設備像素比）這個結果才能真正定義清晰度
圖像分辨率#
即圖片所含的像素點數，表示一張圖片在垂直和水平方向上的像素點數
和螢幕分辨率的定義差不多，只不過一個是定義螢幕的一個是定義圖片的。同一尺寸下分辨率越高，圖片越清晰
PPI（Pixel per Inch）#
每英尺包含的像素點數，可以用來描述螢幕的清晰程度
PPI 越高，圖片質量越清晰。
這裡注意在設計的時候一般約定
手機螢幕使用 72PPI，海報使用 300PPI
據說 PPI 達到 300 以上，就會給人真實感，因此海報的 PPI 要達到這個數值，而手機螢幕如果PPI設置過大，會導致加載過慢，卡頓的現象，一般72PPI也夠用了
PPI 的計算公式
DPI（Dot per Inch）
每英寸包括的點數。它可以是螢幕像素點、圖片像素點也可以是打印機的墨點。
在描述圖片和螢幕的時候可以認為 DPI 和 PPI 兩者等價
在使用打印機的時候，由於打印機打印的點不是規則排列的，打印點之間會存在空隙，因此DPI也被稱之為打印點的密度
打印機的 DPI 越高，打印圖像的精細程度越高，同時墨點的耗費量和打印時間也越長
邏輯像素和物理像素#
以上我們看到的像素都是真實的像素，是物理像素
但是隨著技術的發展出現了邏輯像素，即由多個物理像素組成一個邏輯像素。
這是由乔布斯在Iphone4的發布會上發布的視網膜螢幕（Retina Display）首次提出的
一個很直觀的對比就是，由邏輯像素（假設一個邏輯像素由 3 個物理像素組成）組成的分辨率為 1080*1920 的圖片，和一個由物理像素組成的分辨率為1080*1920的圖片，在像素總量一定的前提下，前者的圖片尺寸是後者的 3 倍，試想想如果把這個 3 倍的尺寸圖片壓縮到 1 倍的圖片中，是不是清晰度骤然就提升了呢？
設備獨立像素#
設備獨立像素，指設備的原始尺寸，這裡的像素是邏輯像素
打開chrome的開發者工具，我們可以模擬各個手機型號的顯示情況，每種型號上面會顯示一個尺寸，比如iPhone X顯示的尺寸是375x812，實際iPhone X的分辨率會比這高很多，這裡顯示的就是設備獨立像素。
設備像素比 DPR#
device pixel ratio簡稱DIP或DP, 指設備的物理像素和邏輯像素之比，也稱之為倍數
開發問題#
移動端#
iOS的尺寸單位為pt，Android的尺寸單位為dp，React Native中沒有指定明確的單位，它們其實都是設備獨立像素dp(Device Pixel)。
WEB 端#
CSS 像素使用的是設備獨立像素 (邏輯像素)
UI 準備圖的時候根據螢幕的質量（2 倍螢幕或 3 倍螢幕）準備 2 倍和 3 倍的像素尺寸進行繪圖
在寫CSS時，我們用到最多的單位是px，即CSS像素，當頁面縮放比例為100%時，一個 CSS 像素等於一個設備獨立像素。
但是 CSS 像素是很容易被改變的，當用戶對瀏覽器進行了放大，CSS 像素會被放大，這時一個 CSS 像素會跨越更多的物理像素。
頁面的縮放係數 = CSS 像素 / 設備獨立像素
螢幕問題#
我們常使用 P 和 K 衡量螢幕質量
P 代表的螢幕縱向的像素個數
1080P 即代表螢幕縱向有 1080 個像素
K 代表的螢幕橫向的像素個數
K 代表螢幕橫向有幾個 1024 像素，像像素超過 4096 一般就稱之為 4K 螢幕
參考文章：關於移動端適配，你必須要知道的