CSS中的那点事儿（一）--- CSS中的单位2
浏览数：27 /
时间：2015年06月09日
在上篇博客提到了%、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，搞清楚这些单位的情况，有利于在画面准备的布局。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
