关于px，分辨率，ppi的辨析

关于px，分辨率，ppi的辨析
概述
 在本篇⽂章的开始，我先为⼤家解释⼀下这三个名词的概念。

 px全称为pixel——像素。

pc及移动设备的屏幕就是通过往像素矩阵中填充颜⾊，从⽽在宏观上体现出图像。

像素越⼩，图像越清晰。

 分辨率⼜称解析度.解像度，其意义为该屏幕中能够显⽰的像素个数，往往⽤⽔平和垂直像素个数来衡量。

 ppi全称为pixels per inch，意义是每英⼨所拥有的像素个数。

由px的定义可以得出，ppi越⼤，图像越清晰。

px所需要思考的问题
 相同的px个数，如10px，在不同类型的显⽰屏幕上的物理长度相同吗？相同的px个数，在不同类型的显⽰屏幕中占的⽐例相同吗？
 先回答上⾯的问题——⼤部分情况下不相同。

 为什么呢？在这⾥要明确⼀点——px不是物理长度单位。

其实由我概述中说的：
像素越⼩，图像越清晰
 就可以看出像素⼤⼩是不确定的。

 那么如何知道该显⽰屏下像素的⼤⼩呢——⽤该屏幕的ppi值计算出来。

 公式为：像素物理长度 = 1/ppi，单位为英⼨。

 由此，我们可以知道了——当不同类型的屏幕的单个像素物理长度不同时，相同的px个数物理长度不同。

 同时，众所周知的，分辨率有好多种，如1280×720，1920×1080等。

例如1280×720，其意义就是该屏幕⽔平⽅向由1280个像素，垂直上有720个像素。

 所以，由此可得——当不同类型的屏幕的⽔平及垂直⽅向上的像素个数不同时，相同的px个数，在该屏幕的⽔平，垂直⽅向上所占的⽐例是不同的。

进⼀步的思考及解决⽅案
 通过以上的内容学习，⼤家应该就能理解为什么相同的px个数，在不同类型的屏幕下——尤其pc端到移动端——字体⼤⼩不同、屏幕边缘部分留⽩或过长失真了吧。

 但是，光⽤px来构建⽹站是远远不够的。

因为我们期望的是同⼀个⽹站，在不同的终端上有1.⼀致性，2.响应式——这两者其实是对⽴的，⼀致性是不同终端页⾯内容及布局都是相同的，响应式是根据终端类型改变来改变布局以使页⾯更友好——的特点，不希望有⽐例失真或屏幕内容过⼩过⼤的情况。

 ⽽解决这些问题，我们通常使⽤rem，em，⾃适应式建站，响应式建站。

 篇幅所限，在下⼀章中再来讨论。

参考资料
1. 市场常见屏幕尺⼨以及分辨率：
2. 为什么同样⼤⼩的像素在移动端和pc端看起来不⼀样:。