px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。
em是相對長度單位。相對於當前對象內文本的字體尺寸,多理解父級設定font-size的尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)
任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。
注:在body里面注明 font-size:62.5%;
1.之后可以將em當px使用,x10就好,當然前提是父級標簽里面沒設定font-size,
2.一旦父級元素有設定字體大小, em前面數值x就相當於父級元素字體乘以x%
3.相對最臨近父級元素,且可以一直往下疊加.
下面案例對比你可以看的更清楚px和 em的使用
1 <body style="font-size:62.5%;"> 2 3 <div style="width:200px; height:300px; margin-top:20px; border:1px solid #f00; font-size:2em; "> 4 這里的文字是第一級的大小 5 <div style="font-size:0.9em;"> 6 這里的文字是第二級的,相對第一級x90%; 7 <p style="font-size:0.8em;">這里的文字是第三級的,相對第二級x80%</p> 8 </div> 9 </div>
10 <div style="width:200px; height:300px; margin-top:20px; border:1px solid #f00; font-size:20px; "> 11 這里的文字是第一級的大小 12 <div style="font-size:18px;"> 13 這里的文字是第二級的 14 <p style="font-size:14px;">這里的文字是第三級的</p> 15 </div> 16 </div>
17 </body>