CSS的长度单位
作者：大漠 日期：2013-04-01 点击：4303
特别声明：此篇文章由Jekst根据Chris Coyier的英文文章原名《The Lengths of CSS》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://css-tricks.com/the-lengths-of-css以及作者相关信息
——作者：Chris Coyier
——译者：Jekst
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。
杂言：百分比不是一个专门的长度单位，我把它也包括在本文中是因为百分比和长度关系很大。
扩展阅读
你的浏览器支持什么？
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
关于Jekst
常用昵称jekst，目前就职于北京一家信息技术公司，主要从事。net系列的开发，热爱前端，对css、jQuery有浓厚兴趣，喜欢参加技术交流活动。欢迎交流共勉：新浪微博。
如需转载烦请注明出处：
