前端常用长度单位（px，em，rem，pt）介绍

CSS中有不少属性是以长度作为值的。盒模型的属性就是一些很明显的值属性：width、height、margin、padding、border。除此之外还有很多其他的CSS属性的值同样也是长度值，像偏移量(offset)、box-shadow的大小或者字体的大小、间距等。CSS中有哪些长度单位可以作为属性的值呢？这样的单位有很多。

 

绝对长度单位

px

.wrap {
  width: 400px;
}

像素或许被认为是最好的“设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

像素应该是设备和显示器中显示趋于一致，但是他越来越不正确。比如：在迷你ipad上显示的网站和ipad本身显示的网页是一样的，意味着如果那些设置的像素值标准化后就超出了窗口的范围

在web上，像素仍然是典型的度量单位，很多其他长度单位直接映射成像素，最终，他们被按照像素处理，javascript语言里的单位就是使用的像素。

in

.wrap {
  width: 4in;
}

英寸是一个物理度量单位，但是在CSS领域，英寸只不过被直接映射成像素罢了。欢迎大家在评论中提供使用英寸做单位的实例，我会把这些实例添加到这里的，但是，到目前为止我还没有见过哪个实例用的是英寸，当然也没见过使用下面那些物理度量单位的实例。

1in == 96px

cm

.wrap {
  width: 20cm;
}

对于世界上大多数的人来说，厘米是比较熟悉有用的物理度量单位。它也映射成像素

1cm == 37.8px

mm

.wrap {
  width: 200mm;
}

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

1mm == 0.1cm == 3.78px

相对字体的长度

Em

.wrap {
  width: 40em;
}

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

.wrap {
  width: 40rem;
}

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

值得注意的浏览器支持问题： IE8，, Safari 4或 iOS 3.2中不支持rem单位。

points

.wrap {
  width: 120pt;
}

Point是一个物理度量单位，1pt=1/72 in.在CSS之外point是最常用的尺寸类型（可能这就是css支持point的原因）。它在语言里也很常见“当然他们把这个重要的信息设置成了小八号字体”。

在打印样式表和物理媒介中，point是最有意义的，当然你也可以用在屏幕媒介上使用，或者其他的地方

值得注意的浏览器支持问题：在屏幕呈现pt尺寸的时候，会有很大的不同，这里有个关于IE6和firefox（可能是3.6版本）的对比。

pica

.wrap {
  width: 12pc;
}

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

ex

.wrap {
  width: 60ex;
}

ex是一个基于当前字体的x字母高度度量的。ex度量时有时候根据字体自身的信息，有时候由浏览器指明是通过一个小写字形来度量，最糟糕的情况是，它被设置成0.5em。它之所以被命名为“x”的高度，是因为是基于x字母的高度的。要理解x-height，想象一个小写字母，比如“d”，它会有一部分翘起，x-height是不包括翘起的这一部分的，它的高度是那个字母最下面的那一部分。

和em不同，当改变font-family时em不会改变，而ex单位会变化，因为一个单位的值和那个字体是特殊的约束关系。

ch

.wrap {
  width: 60ch;
}

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

值得注意的浏览器支持问题：写这篇文章的时候任何一个webkit内核的浏览器都不支持这个单位。

可视区百分比长度单位

vw

.wrap {
  width: 10vw;
}

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

这里有一篇文章，里面主要的使用实例就是可视区百分比单位。

值得注意的浏览器支持问题：在移动浏览器中除了最新的iOS6支持这种单位外，其他的都不支持，这一点也适用于其他可视区相对长度单位。

vh

.wrap {
  width: 10vh;
}

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

vmin

.wrap {
  width: 20vmin;
}

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

vmax

.wrap {
  width: 20vmax;
}

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

值得注意的浏览器支持问题：webkit内核的浏览器支持vmin，不支持vmax。但是Firefox支持vmax。

离奇的长度单位

百分比

.wrap {
  width: 50%;
}

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。例如，如果一个元素呈现的宽度是450px，子元素的宽度设为50%，那么子元素呈现的宽度为225px。

杂言：百分比不是一个专门的长度单位，我把它也包括在本文中是因为百分比和长度关系很大。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css/the-lengths-of-css.html © w3cplus.com