em和px的转换关系

本文的内容其实在一般的网页设计中没有太大影响，不管你用的是pt，px，em，还是cm，或者其他单位，因为对于计算机的屏幕设备而言，px（像素）是一个最基本的单位，就是一个点。其它所有的单位，都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候，都统一先换算成为像素的多少，然后进行显示。
所以，就计算机的屏幕而言，相对长度和绝对长度没有本质差别。任何单位其实都是像素，差别只是比例不同。
如果把讨论扩展到其它输出设备，比如打印机，基本的长度单位可能不是像素，而是其它的和生活中的度量单位一致的单位了。
CSS绝对长度单位是对于输出设备(output device)而言的。拿pt来说，这是一个在文字排版工具(word,adobe等)中非常常用的字体单位，不管你的显示器分辨率是1024*768，还是800*600，同一篇文档打印在纸面上的结果是一样的。
写网页用哪个长度单位更好，是px还是pt呢？或者em？

全看你自己。

当然，也有浏览器能够调整px和em，比如firefox。

px和em都是相对长度单位，不同的是，他们的所参考的对象不一样，px是相对于显示器屏幕分辨率而言的；em是相对于当前对象内文本的字体尺寸而言的；而pt是绝对单位。

这里只讨论em和px的转换，不讨论pt。
如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。而任意浏览器的默认文本大小都是16px。

于是乎，所有未经调整的浏览器都符合这个转换公式：1em=16px。
有理可得：12px=0.75em；10px=0.625em。
不过，每次都写转换是不是太烦躁了，CSS出现的目的本来就是为了让我们更轻松的。所以为了简化font-size的换算，最好在CSS中的body选择器中声明：font-size=62.5%，（就像是一个中间转化公式，方便接下来的单位转换）

这就使em值变为：
16px62.5%=10px，

这样12px=1.2em；10px=1em。

也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：px20=1em）

em有如下特点：

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。　　

所以我们在写CSS的时候，需要注意：

1. 避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

注：但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。江湖传言，原因可能是IE处理汉字时，对于浮点的取值精确度有限。
其他CSS单位

% 百分比 
in 英寸 
cm 粒米 
mm 毫米 
em 1em等于当前的字体尺寸；2em等于当前字体尺寸的两倍；例如，如果某元素以12pt显示，那么2em是24pt；在CSS中，em是非常有用的单位，因为它可以自动适应用户所使用的字体。

ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)

pt 磅 (1 pt 等于 1/72 英寸)

pc 12 点活字 (1 pc 等于 12 点)

px 像素 (计算机屏幕上的一个点)

PS：根据网络资料整理
参考资料：《CSS入门经典》
http://baike.baidu.com/view/350386.htm#4
http://www.w3school.com.cn/css/css_font.asp
http://www.w3school.com.cn/css/css_units.asp
http://www.blabla.cn/css_tutorials/060_css_length_unit.html