前言

现如今，我们和电子屏幕交流的时间，远超过了家人和朋友。那么，你真的了解手中的屏幕吗？

屏幕尺寸

当我们购置新机，不管是电脑或是手机，屏幕尺寸是首要的考量点。iPhone 13 Pro 是6.1英寸，iPhone 13 Pro Max 是6.7英寸。英寸是多长，为什么屏幕大小可以仅用一个数字来表达？

屏幕尺寸指屏幕对角线的长度，单位是英寸，1英寸=2.54厘米。

屏幕比例是指屏幕宽度和高度的比例，又名纵横比或者长宽比，标准的屏幕比例一般有4:3和16:9两种，因为屏幕比例是固定的，所以对角线长度即可表达屏幕尺寸。

屏幕分辨率

屏幕分辨率指在横纵向上的像素点数，单位是px，1px=1个像素点。

一般纵向像素x横向像素来表示一个手机的分辨率，如1960x1080。（这里的1像素指的是物理设备的1个像素点）。

屏幕像素密度/ppi

屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕分辨率有关。

ppi的计算公式如下：

在上面的几个屏幕指标中，频繁出现计量单位——像素。作为前端开发工程师，会在代码中频繁使用CSS像素。但是，此像素非彼像素。

设备像素/物理像素/dp

屏幕有一个n x m的分辨率，那是屏幕的n x m个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度。物理像素也被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。任何设备的物理像素的数量都是固定的。

如果使用物理像素写页面就会带来问题：举个例子，21英寸显示器的分辨率是1440x1080，5.8英寸的iPhone X的分辨率是2436×1125，我们用CSS画一条线，其长度是20px，如果都以物理像素作为度量单位，那么在显示器上看起来正常，在iPhone X屏幕上就变得非常小。因此，我们需要逻辑像素。

设备独立像素/dip

设备独立像素（也叫密度无关像素），可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（比如：CSS像素），然后由相关系统转换为物理像素。

CSS像素

CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。它是为web开发者创造的，在CSS或者JavaScript中使用的一个抽象的层。一般情况下，CSS像素被称为与设备无关的像素，简称为“DIP”。在一个标准的显示密度下，一个CSS像素对应着一个设备像素。

CSS像素与物理像素的关系

一个width为200px的元素，它占据了200个CSS像素，但200个CSS像素占据多少个物理像素取决于屏幕的特性（是否是高密度，即像素比）和用户的缩放行为。在苹果的视网膜屏幕中，视网膜的像素密度是普通屏幕的两倍，这个元素就跨越了400个设备像素，如果用户放大，它将跨越更多的设备像素。

对于Web开发者而言：我们使用的每一个CSS和JavaScript定义的像素本质上代表的都是CSS像素，我们在开发过程中并不在意一个CSS像素到底跨越了多少个设备像素。我们将这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。

像素比dpr

官方定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素/独立像素（可由window.devicePixelRatio获得）。