记CSS中一些不常用的单位

我们耳熟能详的CSS单位,有很多,例如:px, pt, %等,下面详细总结一下CSS中常见和不常见的单位。

相对单位

  • em 当前元素的字体尺寸
  • ex 小写字母x的高度
  • ch 英文下0的宽度
  • rem 节点html下的字体尺寸
  • vw 视窗viewport宽度的1%
  • vh 视窗viewport高度的1%
  • vmin 视窗最小尺寸的1%
  • vmax 视窗最大尺寸的1%

em

这个单位是相对当前元素的字体尺寸的百分比,1em理解为当前字体尺寸的100%。

p{  
    font-size:16px;
    line-height:1.2em; //行高为1.2倍的字体尺寸,即1.2*16=19.2px;
}

ex

该单位不常见,它的尺寸为一个英文字母x的高度。在W3C的官方文档中,不管所用字体是不是包含英文字母x,该单位都应有效。如果没有x,则建议使用o或者其它可以作为标尺的英文字母或图形。

ch

改单位与ex相似,是取的英文数字0的宽度。1ch的宽度就是0的宽度。

rem

rem和em相同,都是字体相对尺寸,但是不同的是,em取的是当前元素的字体尺寸,在子节点中,对应的em会和相应的节点字体尺寸进行计算。而rem则是统一的根节点的字体尺寸。

vw

在IE10+以及其他现代浏览器上,该尺寸代表这视窗(viewport)的宽度的1%。换句话说,在PC上,1vw是浏览器窗口的宽度的1%,在手机等其他设备上,1vw是屏幕宽度的1%。

需要说明的是,视窗宽度包含了页面因为过长而出现的滚动条的宽度。这个特性恰好与百分比%单位不同,%所取的是视图宽度(不包含滚动条)。我们可以利用这个特性来解决因为overflow:auto而造成的页面跳动问题。下面举一个例子:

<body>  
    <div class="outer">Hello World</div>
    <div class="text"></div>
</body>  
<style>  
.outer{
    width:500px;
    margin:0 auto;
    background-color:#aaa;
}
</style>  

这个简单的例子可以看到,我们需要将outer做成居中显示,而居中的手段就是最普通的margin:auto方法。当outer下面的内容过高而导致浏览器出现滚动条时,会出现一个页面跳动的问题: 这时,我们可以通过上述的单位,将滚动条的宽度算出来,并在出现滚动条后,将整个页面的左侧增加一个滚动条的宽度,这样,居中的问题就解决了。

html{  
    margin-left:calc(100vw - 100%);
    margin-right:0;
}

vh

该属性同vw,该属性代表视窗(viewport)高度的1%。

vmin

该单位是vh或者vw中较小的那个值。

vmax

该单位是vh或者vw中较大的那个值

绝对单位

  • cm 厘米
  • mm 毫米
  • q 1/4毫米
  • in 英寸
  • pc picas, 12点活字。
  • pt 磅/点
  • px 像素

绝对单位是我们常用的单位方式,除了出现最多的px之外,pt等常用在移动端等多终端的样式中。

cm

厘米,1cm = 96px/2.54

mm

毫米,1/10厘米

q

1/4毫米。

in

英寸,1in = 2.54cm = 96px

pc

12点活字,1/6英寸

pt

磅或点,1/72英寸

px

像素。1像素为屏幕实际的1像点,我们的计算机或手机屏幕都是由若干像点组成的,那么理论上1像点就是1像素。它的尺寸为1px = 1/96 inch,即一英寸中包含96个px。

但是,需要说明的是,在苹果的Retina屏幕中,一个像点被做成了更小的点,它是普通屏幕的1/2倍,即1px = 1/192 inch,这就说明,如果严格按照像点的定义,所有的普通显示屏上的尺寸,都会在Retina上面小一倍。(因为像点小一倍)。因此,我们在编写前端页面时,如果想要使所有页面的尺寸统一,那么就需要将px改成pt,因为pt的大小是固定的,而px的大小是不固定的。这同时也是为什么我们常把以px为单位的CSS样式都写成偶数的原因,因为在Retina屏幕中,2px才是普通屏幕中的1px

Reference