CSS的长度单位

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

特别声明:此篇文章由Jekst根据的英文文章原名《The Lengths of CSS》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://css-tricks.com/the-lengths-of-css以及作者相关信息

——作者:

——译者:Jekst

CSS中有不少属性是以长度作为值的。盒模型的属性就是一些很明显的值属性:widthheightmarginpaddingborder。除此之外还有很多其他的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。

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

扩展阅读

  1. The spec on lengths

你的浏览器支持什么?

单击这里

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

关于Jekst

常用昵称jekst,目前就职于北京一家信息技术公司,主要从事。net系列的开发,热爱前端,对css、jQuery有浓厚兴趣,喜欢参加技术交流活动。欢迎交流共勉:新浪微博

如需转载烦请注明出处:

英文原文:http://css-tricks.com/the-lengths-of-css/

中文译文:http://www.w3cplus.com/css/the-lengths-of-css.html

返回顶部