CSS中的那点事儿(一)--- CSS中的单位2

在上篇博客提到了%、px、em三个单位,其中最复杂的是em,因为要计算当前元素内的font-size,必须知道其父元素的font-size,层层累积,容易出错。现在CSS3中引入了新的单位rem,改变了这一现状。

rem

rem, 官方说法:根元素的font-size。官方这次说得很明白,rem是相对于根元素html来计算的,根当前元素的直接父元素无关,只要在html设置font-size就可以了,默认为1rem=16px。下面再看个例子:

.container{
width: 80%;
height: 10em;
padding: 1em;
background-color: #228F45;
font-size: 1.5rem;
}
.child{
width: 50%;
height: 5em;
background-color: #D5DED8;
padding: 0.8em;
font-size: 0.8rem;
}

html下1rem=16px,container下font-size=1.5*16=24px,1em=24px,height=24*10=240px,child下font-size=0.8*16=12.8px,1em=12.8px,height=12.8*5=64px。当然IE8及更低版本的IE是不支持rem的,因此在考虑到兼容性的时候,可以用px来hack。

其他

其他的单位in、cm、mm、pt、pc都是绝对单位,这些单位在web上用得比较少,与px间的换算关系如下
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

总结

目前这些单位中应用比较广泛的是px,em,rem,%,现在很火爆的bootstrap比较多的用到了em,如果不用支持IE8,可以考虑用rem,搞清楚这些单位的情况,有利于在画面准备的布局。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。