px

px是pixel缩写,是基于像素的单位。根据显示器的分辨率来确定长度,像素是相对于显示器屏幕分辨率而言的。譬如,windows用户所使用的分辨率一般是96像素/英寸,而mac用户所使用的分辨率一般是72像素/英寸。

pt

pt是point(磅)缩写,是一种固定长度的度量单位,大小为1/72英寸。

em

em:是相对于其父元素来设置字体大小的。

这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。

rem

相对于根元素<html>的字体大小来设置字体大小。
其中,由于rem是CSS3新引进来的一个度量单位,所以IE6~8不支持。

这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需

单位转换

px <–> pt

由于windows用户所使用的分辨率一般是96像素/英寸,而mac用户所使用的分辨率一般是72像素/英寸,
pt和px的换算公式也比较简单,pt=px * 3/4(for windows),或pt = px(for mac)。

px <–> em

浏览器的默认字体高都是16px。子元素会继承父级元素的字体大小,于是1em=16px,所以1.6em = 1.6 * 16px = 25.6px。

IE处理汉字时,对于浮点的取值精确度有限,由以上方法得到的25.6px(1.2em)大小的汉字在IE中并不等于直接用25.6px定义的字体大小,而是稍大一点。

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/css/341