px是最常用的CSS长度单位。1px到底多长？
CSS长度分为绝对长度和相对长度。 css单位
pixel（像素）是图像的基本采样单位。它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。
不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点，也可以认为是打印机的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。
设备像素：设备的物理像素，其尺寸大小是绝对的
逻辑像素：CSS 的像素单位，其尺寸大小是相对的，也称为独立像素
分辨率：屏长的设备像素 × 屏宽的设备像素
dpi（dots per inch）：像素密度，表示水平或垂直方向每英寸长度的像素数目
ppi（pixels per inch）：像素密度，表示沿对角线每英寸长度的像素数目
缩放因子（Scale Factor）：逻辑像素相对于设备像素的放大比例，可通过 window.devicePixelRatio 获得，但二者并不完 全等同
注意，我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。
分辨率（设备像素）= 设备尺寸 × 像素密度
例如：iphone6s 分辨率 为1920 * 1080。其对角线长度为5.5 inches，像素密度401 ppi，计算可得对角线的设备像素为5.5 * 401 = 2205.5
逻辑像素 = 设备像素 × 缩放因子
例如：iphone6逻辑像素为375 * 667，分辨率为750 * 1334，缩放因子为2。1个逻辑像素 = 设备宽度的1/375；1个设备像素 = 设备宽度的1/750。所以：1/375 = 1/750 * 2
设备像素都是固定的，所以逻辑像素大小由缩放因子决定，那么缩放因子由什么决定？到底放多大才合适？
对于桌面设备，逻辑像素通常就等同于物理像素，本来是不用考虑缩放问题的。一切问题的根源就在于：屏幕变得越来越高清，ppi 越来越大。比如我现在用的 PC 是1920px的高清屏，如果没有缩放，所有的东西看起来都会比较小，因此需要放大。
所以决定缩放因子大小的，就是像素密度，密度越大、越高清的屏幕，需要的缩放比例就越大。
PC 上的缩放比例是自定义的。那么移动端的缩放比例是怎么确定的呢？答案是 ：viewport。
viewport 就是屏幕那块儿固定的可视区面积。默认情况下，移动端浏览器会将 viewport 宽度设为980px（也有可能是1024px 或其它值），也就是说1px = 设备屏幕宽度的1/980。这跟缩放因子没有任何关系。
这时的1px 非常小，所有的元素都变得非常小，移动端浏览器之所以这么做，是为了尽可能完整的显示 PC 端的网页，然后允许用户通过缩放来查看细节。
如果我们不希望采用默认的设置，就需要人工设置 viewport：<meta name="viewport" content="width=device-width">
将 viewport 宽度设为设备宽度，那么这里的设备宽度到底是什么呢？这就跟缩放因子有关系了。iphone4 ~ iphone6的 ppi 都是326，缩放因子都是2，所以1个逻辑像素的大小等于2个设备像素。
|
设备 |
设备分辨率 |
缩放因子 |
逻辑分辨率 |
ppi |
|
4s |
640 * 960 |
2 |
320 * 480 |
326 |
|
5s |
640 * 1136 |
2 |
320 * 568 |
326 |
|
6 |
750 * 1334 |
2 |
375 * 667 |
326 |
对于 iphone6，1px = 屏幕宽度的1/375，相比1/980放大了不少，而这时候的1px 就是一个比较理想的大小，即比较符合我们在 PC 端使用 px 时的感受。也就是说326的 ppi对应的放大比例是2，326 : 2是一个经验比率（1px = 1/163inch），实践检验比较妥，苹果就这么干的，所以就这么定了。所以如果是652的 ppi，则理想的放大比例为4。
实际上在 CSS2.1 中有这么一条：如果显示设备的像素密度与典型的电脑显示器差异明显，用户代理应当重新调整像素值。建议以阅读者在一臂距离处观察到的像素密度为96 dpi 的设备上的一个设备像素作为参考像素，大约为1/96 inch，0.26mm。
但是这条建议实在是跟不上屏幕进化的速度，所以在 PC 端都没有得到执行，更何况移动端。你可以在 PC 上画一个100px 的正方形，按照上述标准，这个100px 的正方形应该和一个一元硬币（直径25mm）差不多大小。你比较一下，如果正方形比硬币大，就说明你的屏幕 ppi 有些低。（分辨率调得太低或者是放大比例调得太高除外）。
如果电脑上一个逻辑像素大约为1/113 inch，那么移动端将1/163 inch 作为逻辑像素的参考大小，就说明电脑上一个16px 的字，在手机上会缩小到大约三分之二，这是符合我们的使用经验的。
iphone6s的 ppi 达到了401，按照比率，它的缩放因子应该等于2.6。
|
设备 |
设备分辨率 |
缩放因子 |
逻辑分辨率 |
ppi |
|
6s |
1080* 1920 |
3 |
414 * 736 |
401 |
但是2.6这一奇葩的比例不太方便切图，所以 iphone6s 就直接改成了3，然后再整体压缩87%（2.6 / 3）。这也是为啥iphone6s 全屏截图的尺寸是1242 * 2208。
以下介绍三种需适配的场景：
1、ppi 适配——ppi 适配要解决的问题是：在最小基本单位尺寸不固定的情况下，如何找到一个固定大小的尺寸单位。
对于文字，我们希望16px 的文字无论在什么样的屏幕下看起来都是一样大的。也就是说我们希望这里的 px 是一个实际物理尺寸固定的单位。
设置 viewport 就可以实现这个目的：<meta name="viewport" content="width=device-width">
1个逻辑像素的尺寸 = 1 / ppi * 缩放因子 = 1/163 inch。所以说设置 viewport 本质上是把 px 变成了一个“绝对单位”。
那么用 cm 或 mm 作为尺寸单位行不行呢？我认为是符合此场景的，只不过有些反人类。
2、resolution 适配——分辨率适配要解决的问题是：找到一个相对单位，使得同一尺寸在不同大小的屏幕上看上去相对大小一致。
比如一张宽100%，高100unit 的 banner 图，我们希望它在任何大小的屏幕上能够等比例缩放，因此我们需要这里的 unit 是一个相对单位。
vw 和 vh 就是很好的相对单位，但考虑到兼容性，只有用 js 实现一个 vw，具体可参见文末链接。
3、dpr 适配——devicePixelRatio 适配要解决的问题是：在设置了 viewport，width=device-width 的情况下，如何画出1px（设备像素）的问题。
dpr=2意味着 CSS 中的1px 会用两个设备像素来渲染，在 iphone6s 上更会用3个设备像素来渲染。
解决的方案大致有：用小数、用图片、用渐变、用阴影、用 transform 缩放。手机淘宝的做法是使用 js 动态设置 viewport 的 initial-scale。
|
设备 |
1px大小 |
devicePixelRatio |
缩放因子 |
逻辑分辨率 |
initial-scale |
|
iphone6s
|
3个设备像素 1/414屏宽 |
3 |
3 |
414 * 736 |
1 |
|
1.5个设备像素 1/828屏宽 |
3 |
1.5 |
828 * 1472 |
.5 |
|
|
6个设备像素 1/207屏宽 |
3 |
6 |
207 * 368 |
2 |
以上三类问题可以总结为：绝对单位问题、相对单位问题、最小单位问题。
按照CSS规范的定义，CSS中的px是一个相对长度，它相对的，是viewing device的分辨率。这个viewing device，通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI，也就是1像素为1/96英寸（实际上，假设我们的显示器分辨率都与物理分辨率一致，而液晶点距其实是0.25mm到0.29mm之间，所以不太可能是正好1/96英寸，而只是接近）。
一般来说，px就是对应设备的物理像素，然而如果输出设备的解析度与电脑显示器大不相同，输出效果就会有问题。例如打印机输出到纸张上，其解析度比电脑屏幕要高许多，如果不缩放，直接使用设备的物理像素，那电脑上的照片由600DPI的打印机打出来就比用显示器看小了约6倍。
所以CSS规定，在这种情况下，浏览器应该对像素值进行缩放调节，以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。
怎样确保这一点呢？直接按照设备物理像素的大小进行换算当然是一个方式，但是CSS考虑得更多，它建议，转换应按照“参考像素”（reference pixel）来进行。
眼睛看到的大小，取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西，与1米远处的10厘米见方的东西，看上去的大小差不多是一样的，所谓一叶障目不见泰山，讲的就是这个常识。
因此CSS规范使用视角来定义“参考像素”，1参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。
请注意这个差别——CSS规范定义的参考像素并不是1/96英寸，而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸，所以其视角可以计算出来是0.0213度。（即(1/96)in / (28in * 2 * PI / 360deg) ）
我们在使用不同设备输出时，眼睛与设备输出的典型距离是不同的。比如电脑显示器，通常是一臂之距，而看书和纸张时（对应于打印机的设备输出），则通常会更近一些。看电视时则会更远，比如一般建议是电视机屏幕对角线的2.5到3倍长——如果你是个42'彩电，那就差不多是3米远。看电影的话……我就不知道多远了，您自己量吧。
因此，1参考像素： 对于电脑显示器是0.26mm（即1/96英寸）； 对于激光打印机是0.20mm（假设阅读距离通常为55cm，即21英寸）；
而换算时，对于300DPI的打印机（即每个点是1/300英寸），1px通常会四舍五入到3dots，也就是0.25mm左右；而对于600DPI的打印机，则可能四舍五入到5dots，也就是0.21mm。
上图中，左边的屏幕（可以认为是电脑屏幕）的典型视觉距离是71厘米即28英寸，其1px对应了0.28mm；而右边的屏幕（可以认为是你的42寸高清电视）的典型视觉距离是3.5米即120英寸，其1px对应1.3mm。42寸的1080p电视，分辨率是1920*1080，则其物理像素只有0.5mm左右，可见确实是高清哦。
综上，px是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。
然而，如果你把绝对单位理解为对输出效果的绝对掌控，事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说，px可被视为一个基准单位——与桌面分辨率一致，如果是液晶屏，则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px，就是“最终看到这个网页的用户的显示器上的1个点距”！反倒是那些绝对单位，其实一点也不绝对。
因为绝对单位比如cm或者pt，显示在屏幕上时最后还是要换算为像素，而且这种换算不是按照像素的实际物理长度来换算的（浏览器不用知道，也不可能知道当前这台显示器的1px物理长度到底是多少），而是按照桌面设定的DPI计算的。也就是说，网页设计者指定某个字体是12pt（即1/6英寸或4.2mm），实际上你量量屏幕，几乎不可能是正好12pt，而只是接近12pt的16px（按照96DPI换算）而已。如果你的屏幕点距是0.29mm，则实际上是4.64mm或13.15pt。假如你把桌面改为大字体（120DPI），则最终12pt相当于20px，按照0.29mm点距，最终效果是16.44pt。
过去，建议网页设计者不要使用px，一个原因就是基于用户可以根据自己的需要调节桌面DPI，从而控制绝对长度的实际长度。
然而这其实是可疑的。既然绝对长度的实际长度可以根据需要调节，没有理由px这样一个相对长度不能根据需要调节。就好像照片在实际打印时你当然可以根据需要缩放一样，以px设定的字体和图像在实际显示时完全可以进行缩放——这时网页设计者指定的1px就不再对应于用户桌面的1px，而是可能对应1.2px或1.5px或其他值。
过去浏览器的调节字体大小的选项只对绝对长度有效（相当于调节浏览器内部的DPI），对px无效，这只能说是过去浏览器的设计问题，并不是px的固有问题。现在浏览器都已经支持针对以px设定的字体的缩放了。像Firefox，用户还可以选择是单单缩放字体，还是连图片一块儿缩放。所以全部使用px的“像素级精确设计”完全是可行的，也是我认为合理的设计方式。毕竟，CSS中的px本来就是要确保一致的阅读体验。至于是流式布局还是固定布局，是否能适应不同的分辨率，那是另一个话题，与是否使用px作为单位并没有直接关联。
分类: css
转载自原文链接, 如需删除请联系管理员。
原文链接：像素（px）到底绝对单位还是相对单位，转载请注明来源！