可以掌握的知识之移动端像素概念

在我们进行移动端开发时，不得不考虑web页面在不同移动设备上需要展现的效果，需要在开发过程中使用合理的适配方案来解决这个问题。

在css中我们通常使用px作为单位更多，在PC端，一个像素点恰好对应电脑屏幕上的一个物理像素点，因此很多人误以为css中的像素就是设备的物理像素。

关于一些开发中涉及的像素概念主要有：

设备像素（物理像素）
设备独立像素 / 逻辑像素 / css像素
像素比（DPR）
屏幕尺寸和像素密度（PPI）

设备像素 / 物理像素

一个设备像素代表一个真实的像素点，是设备能控制显示的最小单元，日常开发中我们常遇到的1920 * 1080像素分辨率用的就是设备像素单位。它不一定是一个1 * 1或者2 * 2的小方块，它不存在具体的标准宽高，只是用于显示完整色彩的一个抽象"点"。

物理像素和平时我们移动端开发有什么关系呢？平时看到设备上的参数，往往会有一个像素分辨率，比如iPhone 6分辨率750 * 1334，代表在iPhone 6的屏幕中，水平方向有750个像素点，垂直方向有1334个像素点，它一共有750 * 1334个物理像素。

一个设备的物理像素在出厂时就设置好了，也就是说一个设备的分辨率是固定的！

对于上面这块 LED 灯牌来说，一个发光点就是一个像素，这里的设备像素指的就是实际存在的像素。

设备独立像素 / 逻辑像素 / css像素

设备独立像素(Device Independent Pixel)：与设备无关的逻辑像素，代表可以通过程序控制使用虚拟像素，是一个总体概念，包括我们经常接触的css像素！

举个栗子，日常开发中我们使用的设备是1920 * 1080，但是客户常常用的是屏幕小得不能再小的笔记本😖，通常我们会将电脑的分辨率调整至和客户设备一样，以此查看效果。比如一块屏幕的物理像素是2560 * 1440，但是我们可以人为定义它为1280 * 720，一个设备的独立像素由4个设备像素显示。传统的PC屏幕一个设备像素就等于一个设备独立像素，但是现在市面上有很多高清的屏幕，比如苹果的retina屏幕，它的屏幕画质更加高清的原因是它的一个像素点是由多个物理像素显示的，所以高清屏幕的画质更加锐利，没有颗粒感！现在看MacBook Pro屏幕的参数都是比较大的，比如：2560 * 1600，这里的像素指的是物理像素，实际上MBP的逻辑分辨率可能只有1440 * 900！

🈴开发过程中设计师给出的2x、3x图也是为了去适配高清屏幕。

重点讲解之css像素

这个是前端开发中的一个概念，也是设备独立像素中的一种，css像素是一个抽象单位 ，与设备无关，主要在浏览器中使用。默认情况下1css像素 = 1设备独立像素。

由于不同物理设备的物理像素大小不同，同样大小的css像素在不同设备表现不一致，一个css像素可能对应不同数量的物理像素，于是产生了这样一个问题：不同设备之间没有一个统一单位

------css像素应运而生：我们将其视为一个固定大小的计量单位。

css像素的大小是可变的，上面提过，默认情况下 1css像素 = 1设备独立像素：

当我们按住ctrl和+，把网页页面放大，css像素随之变大，此时一个css像素中可能包括多个物理像素：

当我们按住ctrl和-，把网页页面缩小，css像素随之变小，此时多个css像素填充在一个物理像素中：

查看正常比例下元素的大小为40 * 40，当我把页面调整为200%大小，此时元素大小仍为40 * 40。因为我改变的是每个css像素的大小，并没有让css像素变多。外观上看40 * 40的css像素占据着80 * 80设备像素的物理空间，但是宽度仍是40px，只是现在的css像素面积变为原先的4倍！

像素比（DPR）

像素比即设备像素比（Device Pixel Ratio），代表的是设备的物理像素与逻辑像素之比，所以DPR计算公式为：设备像素 / css像素 。

如果设备像素和css像素比例为1:1，即DPR = 1，此时屏幕上使用一个物理像素显示一个css像素；如果设备像素和css像素比例为1:2，即DPR = 2，那么就要用2 * 2个物理像素显示一个css像素。

【苹果部分设备分辨率】

还是以iPhone 6为例，其中提到屏幕分辨率为750 * 1334，开发尺寸为375 * 667，也就是说在iPhone 6设备中，一个css像素需要2 * 2个设备像素显示。可以试试设一个宽度为375px的<div>放到文档流中，它会占满整个设备宽度。

延伸

在日常移动端开发中，设计师通常会给出二倍图，这是为什么？

假设现在有一张200 * 100的图片需要放在页面中，可以想象成水平方向200个css像素点，垂直方向100个css像素点，在适配屏幕时

假如DPR = 1，在设备渲染时，一个css像素点正好对应一个设备像素点；

假如DPR = 2，一个css像素点对应四个设备像素点，此时图片要被拉伸，图片的每个css像素点都会被放大，会导致图片模糊；所以在进行移动端开发时使用二倍图比较合适，如果图片尺寸为400 * 200，在同样设置css像素为200 * 100，在DPR = 2的设备上就不会模糊了。

屏幕尺寸和像素密度（PPI）

屏幕尺寸

了解完设备像素的概念后，设备的参数往往还有屏幕尺寸的信息。屏幕尺寸具体指的是什么呢？是屏幕面积，还是某条边的长度？

屏幕尺寸的计算并不涉及分辨率，它是屏幕对角线的长度，单位一般为英寸。1英寸 = 25.4mm，所以计算屏幕尺寸的公式可以总结为：D=√(W²+H²)/25.4，其中W为设备宽度，H为设备高度。

以下是苹果官网给出的iPhone 6、iPhone XS Max数据：

像素密度（Pixels Per Inch）

2010年，乔布斯在iPhone 4的发布会上介绍视网膜技术时，阐述了这样一段话："当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个神奇数字以上，你的视网膜就无法分辨出像素点了。"这是苹果对视网膜屏幕的最初定义，iPhone 4屏幕的像素密度也达到了326ppi。
像素密度(ppi)即每英寸所包含的像素点数目，数值越高，单位面积像素越多，屏幕越能以更高的密度显示图像，单位是dpi(dot per inch)。

已知屏幕分辨率和屏幕尺寸就可以计算像素密度，计算公式：屏幕对角线分辨率 / 屏幕对角线长度。

计算iPhone 6的像素密度：屏幕对角线长度：4.7英寸，屏幕横向分辨率：750像素，纵向分辨率：1334像素：

像素密度：√750²+1334² / 4.7 ≈ 326ppi

参考文献：

💖致谢！