共计 2046 个字符，预计需要花费 6 分钟才能阅读完成。
引子
最开始写页面的时候，对页面外面的 px 还是蛮好奇的，电脑上的分辨率如同正好跟页面渲染的宽度值对应，但手机外面却不是这样的，记得过后还去找了相干材料，如同晓得是怎么回事。最近脑海里再次想起了这个问题，但曾经不晓得该如何表述，又没有相干的笔记，这个感觉有必要辨别一下相干的概念。
- Origin
- My GitHub
屏幕尺寸
屏幕尺寸是指屏幕对角线的尺寸，常常看到的形容是英寸（缩写 in），1 in = 2.54 cm。
像素
像素是屏幕上图像显示的最小可控元件，它不是一个点或者一个方块，而是一个形象的取样。每个像素都有色彩，色彩通常用 3 或 4 个重量示意，例如 RGB 办法用红、绿、蓝三原色的光学强度示意一种色彩，CMYK 办法用青、品红、黄、黑四种颜料含量来示意一种色彩，CMYK 色域在印刷行业和打印机常见。
一个像素通常被认为是数字图像中的最小单位。在不同的上下文中，像素的含意可能不同，例如视频中的像素，打印时的像素，显示屏的像素，或者数码相机（感光元素）中的像素。依据语境的不同，会有一些更为准确的同义词，例如取样点，字节，比特，超集，斑等等。
设施像素
设施像素是指设施中应用的实在像素，也叫物理像素。在同一设施中，像素的总数是固定的。
像素密度 PPI 和 DPI
PPI（pixels per inch）是指每英寸的像素数目，罕用于度量计算机显示设施像素密度。
DPI（dots per inch）是指每英寸数码印刷的点数，用于度量印刷行业的空间点的密度。
实践上，PPI 是能够通过已知的对角线尺寸和屏幕分辨率计算出来。能够通过上面的公式计算：
- w 是程度方向上的像素数
- h 是垂直方向上的像素数
- d 是屏幕尺寸
例如 21 英寸屏幕，分辨率为 1920*1680，那么 w=1920，h=1680，d=21，带入计算的 PPI=121.49。
CSS 像素
CSS 像素是编程中的概念，用于逻辑上掂量像素的单位。
分辨率
分辨率（Image resolution）泛指量测或显示系统对细节的分辨能力。从不同方面形容，有像素分辨率、空间分辨率、光谱分辨率和工夫分辨率。平时接触大部分是像素分辨率，例如常说的视频分辨率、显示分辨率和图形分辨率。这里暂只探讨像素分辨率类别。其它类型的相干介绍在这里。
屏幕分辨率
屏幕分辨率是屏幕显示的像素总数，再细分一下就有：物理分辨率和显示器分辨率。
- 物理分辨率是显示器的固有参数，不能调节，个别是指屏幕的最高可显示的像素数。
- 显示器分辨率就是操作系统设定的分辨率。在显示器分辨率和物理分辨率统一时，显示成果才是最佳的，个别举荐设置的分辨率就是物理分辨率。零碎设置分辨率失效是通过算法进行了转换。
举个例子，在手机上的看对于手机信息，能够看到分辨率信息为 720*1280，意思就是屏幕程度方向上有 720 个像素，垂直方向上有 1280 个像素。
图像分辨率
图像分辨率就是单位英寸中所蕴含的像素总数。图像分辨率的表达方式也为“程度像素数×垂直像素数”。例如一张图片的分辨率是 320*289，意思就是图片程度方向上有 320 个像素，垂直方向上有 289 个像素。
devicePixelRatio
这里是指 Javascript 中的 window.devicePixelRatio，它是设施上物理像素和设施独立像素（device-independent pixel，dips，dp）比值。用公式表白就是：devicePixelRatio = 物理像素 / 设施独立像素 。这个也能够解释为 CSS 像素和物理像素的比例，简略来说，它通知浏览器须要多少物理像素来绘制一个 CSS 像素。这个属性能够用来辨别视网膜设施和非视网膜设施。
设施独立像素也叫逻辑像素，是一种基于计算机坐标零碎的物理测量单位，应用程序将独立像素通知零碎，零碎再将设施独立像素转换为物理像素。以设施独立像素定义的尺寸，不论屏幕的参数如何，都能以适合的大小显示。在 IOS 视网膜设施上，screen.width 返回就是 dips，Andioid 设施上 screen.width 的不肯定是 dips。
参考资料
- https://en.wikipedia.org/wiki…
- https://zh.wikipedia.org/wiki…
- https://zh.wikipedia.org/wiki…
- https://en.wikipedia.org/wiki…
- https://en.wikipedia.org/wiki…
- https://zh.wikipedia.org/wiki…
- https://www.jianshu.com/p/c33…
- https://developer.mozilla.org…
- https://www.quirksmode.org/bl…
- https://developer.mozilla.org…
- https://en.wikipedia.org/wiki…
- http://yunkus.com/physical-pi…
- https://segmentfault.com/a/11…