前端长度单位

绝对长度单位

px

px 实际上是一个按角度度量的单位

in

英寸是一个物理度量单位，是在CSS领域，英寸被直接映射成像素

cm

厘米是比较熟悉的物理度量单位,它也映射成像素

mm

毫米是个小数量级的物理度量单位

em

em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变 font-family 时，它的尺寸不会发生改变，但在改变 font-size 的大小时，它的尺寸就会发生变化。

在没有任何CSS规则的前提下，1em的长度是： 1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm 如果有CSS规则改变了字体大小(不管在文档的什么位置)，1em的长度会变成相对于新的 font-size 的大小。

em单位当设置了font-size属性后，它会逐级向上相乘，所以如果一个设置了 font-size:1.1em 的元素在另一个设置了 font-size: 1.1em 的元素里，而这个元素又在另一个设置了 font-size:1.1em 的元素里，那么最后计算的结果是 1.1X1.1X1.1=1.331rem（根em）。这意味着即使一个元素设置为10em，这个元素也不会在他出现的每个地方都是10em。如果font-size变化了，它可能会更宽，也可能会更窄。

rem

rem 和 em一样也是一个相对单位，但和em不同的是 rem 总是相对于根元素(如:root)，而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。

points

point 是一个物理度量单位，1pt=1/72 in。在CSS之外 point 是最常用的尺寸类型。 在打印样式表和物理媒介中，point是最有意义的，当然也可以用在屏幕媒介上使用，或者其他的地方。值得注意的浏览器支持问题：在屏幕呈现pt尺寸的时候，会有很大的不同。

pica

pica 和 points 一样，只不过 1pc = 12pt。

ex

ex是一个基于当前字体的 x 字母高度度量的。ex 度量有时根据字体自身的信息，有时由浏览器指明是通过一个小写字形来度量，最糟糕的情况是，它被设置成0.5em。它之所以被命名为“x”的高度，是因为是基于 x 字母的高度的。

要理解x-height，想象一个小写字母，比如“d”，它会有一部分翘起，x-height是不包括翘起的这一部分的，它的高度是那个字母最下面的那一部分。 和 em 不同，当改变 font-family 时 em 不会改变，而ex单位会变化，因为一个单位的值和那个字体是特殊的约束关系。

ch

ch的内涵和x高度相似，只是ch是基于字符0的宽度的而不是基于字符x高度的。当font-family改变的时候ch也会随着改变。

百分比长度单位

vw

vw 是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关。其是相对于根元素。

vh

vh和vw（viewport widht）单位一样，不同的是vh是相对于可视区的高度。

vmin

vmin的值是当前vw和vh中较小的值。在标准尺寸类型的使用实例中，和由自己确定屏幕大小的vw、vh单位相比，vmin是一个更有用的度量标准。

vmax

vmax的值是vw和vh中的较大的值。

示例

image {
  width: 100vmin;
  height: 100vmin;
}