css进阶之五：length长度单位

<length>是表示距离尺寸的一种css数据格式。它由一个<number>后紧随一个长度单位（px，em，pt，in，mm，…）组成。和任何 CSS 尺寸一样，数字和单位之间没有空格。<number> 0之后的长度单位是可选的。

许多CSS属性使用<length>值，比如width、margin、padding、font-size、border-width、text-shadow…

对于某些属性，长度使用负值会有语法错误，但是有一些属性是允许负长度的。请注意虽然<percentage>也是CSS尺寸并且可以被一些 CSS属性接受为<length>值，但它们本身不是<length>值。

常见单位

相对长度单位

相对字体大小单位

em
相对长度单位，这个单位表示元素的font-size的计算值。如果用在font-size 属性本身，它会继承父元素的font-size。

这个单位常用于创建可伸缩布局，这样即便用户更改了字体尺寸，也可以保持 vertical rhythm of the page。CSS属性line-height，font-size，margin-bottom和margin-top常具有一个用em表示的值。

ex
这个单位表示元素font的 x-height 。在含有“X”字母的字体中，它是该字体的小写字母的高度；对于很多字体， 1ex ≈ 0.5em。

ch
这一单位代表元素所用字体 font中“0”这一字形的宽度（“0”，Unicode字符U+0030），或更准确地说是“0”这一字形的预测尺寸（advance measure）。

rem
这个单位代表根元素的 font-size 大小（例如元素的font-size）。当用在根元素的font-size上面时，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小的2倍,当然此时页面中字体的大小也是html的根字体默认大小的2倍)。

该单位在实际使用中一般用于创建完美的可扩展布局。如果不被目标浏览器支持，可以使用em单位，虽然会稍微复杂一些。

lh
等于元素行高line-height的计算值

rlh
等于根元素行高line-height的计算值。当用于设置根元素的行高line-height或是字体大小font-size 时，该rlh指的是根元素行高line-height或字体大小font-size 的初始值

视口比例的长度

视口比例长度定义了相对于视口的长度大小，视口即文档可视的部分。当视口的大小被修改（通过更改桌面计算机窗口大小或旋转手机或平板设备的方向）时，只有基于Gecko的浏览器才动态更新视口值。

如果html和body设置了overflow:auto，滚动条占据的空间不会从视口中减去（译者注：大概就是说会算在视口里，视口大小是包括滚动条的），但当设置为overflow:scroll时，滚动条占据的空间反而会从视口中减去（译者注：大概就是此时视口大小不包括滚动条）。

overflow:auto，滚动条最终占用的空间大小不是减去视口大小之后的宽度，而 overflow:scroll 才是。

在 @page 在规则声明块的长度，视口使用无效，声明将被丢弃。

vh
视口高度的 1/100。

vw
视口宽度的 1/100。

vi
Equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis（axis:轴）.

vb
Equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis（axis:轴）.

vmin
视口高度和宽度之间的最小值的 1/100。

vmax
视口高度和宽度之间的最大值的 1/100。

绝对长度单位

绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。这是通过将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个。对于低分辨率的设备，如屏幕、高分辨率设备，如打印机，该锚定是不同的。

from:MDN

低DPI设备，单位像素代表物理参考像素和其他人是指相对于它。因此，在定义为96px等于72pt。这个定义的结果是，在这样的设备，长度在英寸（in），厘米（cm），毫米（mm），没有必要匹配的物理单位的长度相同的名称。

高DPI设备，英寸（in），厘米（cm），毫米（mm）被定义为他们对应的实体。因此，px单位和他们相关（1 / 96 英寸）。

用户可以增加字体大小，用于辅助功能。为了允许使用的布局，无论是所使用的字体大小，只使用绝对长度单位时，输出介质的物理特性是已知的，如位图图像。设置字体大小相关的长度时，更喜欢相对单位像EM或REM。

px
与显示设备相关,这里的px指的是css像素，i.e.开发者可以操作的单位。
对于屏幕显示，通常是一个设备像素（点）的显示。
对于打印机和高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此，每英寸的像素的数量保持在96左右。权威文档MDN上将px定义为了绝对单位,这意味着，按照文档编写者的想法，将中文文字大小设置为12px后，无论使用什么样的设备查看网页，字体的大小始终为1/8英寸(移动端浏览器下需要设置缩放比为1)。

mm
毫米。

cm
厘米（10毫米）。

in
英寸（2.54厘米）。

pt
磅（1/72 英寸）。

pc
12 点活字 (1 pc 等于 12 点)。

mozmm
一个实验单位，无论显示器的尺寸或分辨率如何，都会尝试在一毫米处进行渲染。很少会用到，但可能在移动设备特别有用。

CSS 单位和每英寸点数（DPI）

CSS 的单位不是根据物理上的英寸来表现的，而是表现为 96px（译注：这里指的应该是 1in = 96px）。这意味着无论真实屏幕的像素密度是多少，（在 CSS 中）它都假设为 96dpi。在一个高像素密度的设备中，1in 会小于实际的 1 物理英寸。类似地 mm、cm 和 pt 都不是一个绝对的长度单位。

一些具体的例子：

1in 总是（等于）96px
3pt 总是（等于）4px
25.4mm 总是（等于）96px

1px到底有多长

前面说到的 px 相对单位指的是图像显示的基本单元，它既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。刚刚提到了图像显示的基本单元，这个东西在不同设备上又是不一样的，例如显示器上的物理像素指的是显示器的点距，而打印机的物理像素则指的是打印机的墨点。

CSS 像素的真正含义

按照 CSS 规范的定义，CSS 中的 px 是一个相对长度，它相对的，是 viewing device 的分辨率。这个 viewing device，通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI，也就是1像素为1/96英寸（实际上，假设我们的显示器分辨率都与物理分辨率一致，而液晶点距其实是0.25mm到0.29mm之间，所以不太可能是正好1/96英寸，而只是接近）。

一般来说，px 就是对应设备的物理像素，然而如果输出设备的解析度与电脑显示器大不相同，输出效果就会有问题。例如打印机输出到纸张上，其解析度比电脑屏幕要高许多，如果不缩放，直接使用设备的物理像素，那电脑上的照片由 600DPI 的打印机打出来就比用显示器看小了约6倍。

由于不同的物理设备的物理像素的大小是不一样的，所以 CSS 认为浏览器应该对 CSS 中的像素进行调节，使得浏览器中 1个 CSS 像素的大小在不同物理设备上看上去大小总是差不多，目的是为了保证阅读体验的一致。为了达到这一点，浏览器可以直接按照设备的物理像素大小进行换算，而 CSS 规范中使用参考像素来进行换算。

一个参考像素即为从一臂之遥看解析度为 96DPI 的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。它并不是1/96英寸长度，而是从一臂之遥的距离处看解析度为 96DPI 的设备输出一单位（即1/96英寸）时视线与水平线的夹角。通常认为常人臂长为28英寸，所以它的视角是: (1/96)in / (28in 2 PI / 360deg) = 0.0213度。如下图是一个示意图：

对于人来说，眼睛看到的大小取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西，与1米远处的10厘米见方的东西，看上去的大小差不多是一样的，所谓一叶障目不见泰山，讲的就是这个常识。

左边的屏幕（可以认为是电脑屏幕）的典型视觉距离是71厘米即28英寸，其1px对应了0.28mm；而右边的屏幕（可以认为是你的42寸高清电视）的典型视觉距离是3.5米即120英寸，其1px对应1.3mm。42寸的1080p电视，分辨率是1920*1080，则其物理像素只有0.5mm左右。

综上，px 是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。

影响像素的那些因素

然而，如果你把绝对单位理解为对输出效果的绝对掌控，事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说，px 可被视为一个基准单位——与桌面分辨率一致，如果是液晶屏，则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px，就是“最终打开这个网页的用户在显示器上看到的1个点距”！反倒是那些绝对单位，其实一点也不绝对。

那么 px 都会受哪些因素的影响而变化？

每英寸像素(pixel per inch, ppi/PPI): 它表示的是每英寸所拥有的像素(pixel)数目，更确切的说法应该是像素密度，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。数值越高，代表显示屏能够以越高的密度显示图像。之所以要用对角线来计算，是因为屏幕对角线长度（屏幕尺寸）是厂商制造时就定好的精确数值。而宽和高都需要计算才能得到。
设备像素比(device pixel ratio, dpr/DPR): 它描述的是未缩放状态下，设备像素和 CSS 像素的初始比例关系，也可以解释为默认缩放比例。如何理解这个概念呢？通俗来说，它是指在开发中1个 CSS 像素占用多少设备像素，如 dpr=2 代表1个 CSS 像素用2x2个设备像素来绘制，所以，可以理解为 1px由多少个设备像素组成
DPI: 每英寸多少点。
当用于描述显示器时，我们可以吧 ppi 和 dpi 认为是同一个概念。那么 ppi 和 dpr 到底是什么关系呢？ ppi 用作显示设备的工业标准，业界人士用 ppi 的值来衡量一个屏幕是否为高清屏，然后根据得到的密度分界来获得此时对应的 dpr 值，也即默认缩放比例。 dpr 和 ppi 相关，一般 dpr 为 ppi/160 的整数倍，如下所示：

项名	ldpi	mdpi	hdpi	xhdpi
密度分界（密度值）	120	160	240	320
屏幕尺寸（分辨率）	240×320	320×480	480×800	640×960
默认缩放比例	0.75	1.0	1.5	2.0

了解了这两个概念后，我们可以来说说导致 CSS 中 px 变化的因素了。

像素密度：从 iPhone4 开始，苹果推出了 Retina 屏，分辨率提高了一倍（640*960），而屏幕尺寸却没变。这时一个css像素=2个设备像素（换算公式为 1px = (dpr)^2 * 1dp, 必须让css中的1px代表更多的设备像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，否则会因太小而看不清），即 DPR=2，示意图如下：
缩放操作：缩放也会引起 css 中 px 的变化。放大页面到200%，字体大小与元素宽度的像素值不变，只是css的1px代表设备像素中的4px，宽高都是200%，DPR增加了。此时，获取 screen.width 值不变，而 window.innerWidth/Height 值（visual viewport）变成原来的一半。缩放值越大，当前 viewport 宽度会越小。

如何理解上面说到的缩放呢？放大1倍，原来 1px 的东西变成 2px，但 1px 变为 2px 并不是把原来的 320px 变为 640px，而是在实际宽度不变的情况下，1px 变得跟原来的 2px 的长度（长宽）一样了（元素会占据更多的设备像素），所以放大1倍后原来需要 320px 才能填满的宽度现在只需要 160px，也即原来 320px 的面积里现在只能填入 160px 的东西了。

举个例子说明 CSS 像素的相对性，如下示意图：

作为Web开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素。假设我们用PC浏览器打开一个页面，浏览器此时的效果如左图所示，但如果我们把页面放大（通过“Ctrl键”加上“+号键”），此时块状容器则横向扩张，如右图所示（黑色为实际效果，灰色为原来效果）。吊诡的是此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。

也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了多个设备像素宽度。