像素、分辨率及PPI各自含义与区别及目前主流手机的分辨率介绍

一、像素

像素是构成位图的基本单元，当位图图像放大到一定程度时，所看到的一个一个的马赛克色块就是像素且像素色块的大小不是绝对的。

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（异形屏幕，需要独立适配）