一、畫素

畫素是構成點陣圖的基本單元，當點陣圖影象放大到一定程度時，所看到的一個一個的馬賽克色塊就是畫素且畫素色塊的大小不是絕對的。

1.物理畫素（裝置畫素）

一個顯示屏的成像原理是通過一系列的小點排列成一個大的矩形，不同的小點通過顯示不同的顏色來顯示成影象。這每一個小點被叫做一個物理畫素（即裝置畫素）。

2.CSS畫素

CSS畫素作為Web開發者我們整天在CSS裡用px作為長度單位。這裡的px指的是CSS畫素。瀏覽器裡的一切長度都是以CSS畫素為單位的。
在非高清螢幕以及未縮放瀏覽器的情況下，一個CSS畫素等於一個物理畫素；
而在搭載了蘋果公司的視網膜顯示屏等高清螢幕（PPI特別高，一個螢幕上的物理畫素點非常多）的裝置上，如果一個CSS畫素仍等於一個物理畫素，那麼網頁上的各種元素就變得非常小，使用者很難看清，因此高PPI的裝置中，一個CSS畫素通常等於兩個甚至三個物理畫素（瀏覽器自動設定，不同瀏覽器設定的會不一樣）。如果一個CSS畫素佔用n個物理畫素，那麼我們就說此時的dppx（dots per pixel）數為n。
dppx

dppx是一個單位。裝置有多少dppx除了跟裝置本身的PPI有關，也和當前的縮放狀態有關，但總的來說不是前端開發者能控制的，而是瀏覽器廠商以及瀏覽器使用者（通過縮放頁面）控制的。桌面瀏覽器上，一個放大到200%的頁面（假如裝置不是高清屏），一個CSS畫素此時等同於兩個物理畫素，即2dppx。
DPR
devicePixelRatio（裝置畫素比，簡稱DPR）。DPR由瀏覽器廠商確定。
關於物理畫素、DPR與視口寬度之間的關係，可詳見如下地址：
連結：https://www.zhihu.com/question/35221839/answer/66825618

影象的畫素大小

在點陣圖影象所包含的所有畫素總量稱為影象的畫素大小。

二、解析度

解析度是指影象在水平和垂直方向上的所容納的最大畫素數，這裡的畫素指的是物理畫素。
例如解析度為1024*768的意思是水平畫素數為1024個，垂直畫素數768個，其畫素大小為1024×768=786432，約80萬畫素。

三、PPI

螢幕尺寸
指其對角線的長度,用英寸表示,1英寸=25.4毫米。

ppi表示的是每英寸所擁有的畫素數目，即在一個對角線長度為1英寸的正方形內所擁有的物理畫素數。
每英寸畫素取值（Pixel per inch，簡稱PPI），意思是每一英寸內的物理畫素數量，計算公式是

畫素色塊越小或者解析度越高則ppi越大。

目前主流手機的解析度

安卓：

2560 x 1440
1280 x 720
新增解析度：
2960x1440
2040x1080

ios :

4 4s 960*640
5 5c 5s se 1 136*640
6 6s 7 8 1334*750
6+ 6s+ 7+ 8+ 1920*1080
新增解析度： iPhone X 2436×1125（異形螢幕，需要獨立適配）