PX、EM、REM單位換算(suàn)表參考
CSS中我們常用(yòng)的(de)單位是px與em，CSS3又給我們帶來(lái)了(le)新單位rem，那麽px、em、rem的(de)三者有什(shén)麽區(qū)别，又各自有什(shén)麽優劣呢(ne)？
| PX單位的(de)特點
1. IE無法調整那些使用(yòng)px作爲單位的(de)字體大(dà)小；
2. 國外的(de)大(dà)部分(fēn)網站能夠調整的(de)原因在于其使用(yòng)了(le)em或rem作爲字體單位；
3. Firefox能夠調整px和(hé)em，rem，但是96%以上的(de)中國網民使用(yòng)IE浏覽器(或内核)。
px像素（Pixel）。相對(duì)長(cháng)度單位。像素px是相對(duì)于顯示器屏幕分(fēn)辨率而言的(de)。(引自CSS2.0手冊)
em是相對(duì)長(cháng)度單位。相對(duì)于當前對(duì)象内文本的(de)字體尺寸。如當前對(duì)行内文本的(de)字體尺寸未被人(rén)爲設置，則相對(duì)于浏覽器的(de)默認字體尺寸。(引自CSS2.0手冊)
任意浏覽器的(de)默認字體高(gāo)都是16px。所有未經調整的(de)浏覽器都符合: 1em=16px。那麽12px=0.75em,10px=0.625em。爲了(le)簡化(huà)font-size的(de)換算(suàn)，需要在css中的(de)body選擇器中聲明(míng) Font-size=62.5%，這(zhè)就使em值變爲 16px*62.5%=10px, 這(zhè)樣12px=1.2em, 10px=1em, 也(yě)就是說隻需要将你的(de)原來(lái)的(de)px數值除以10，然後換上em作爲單位就行了(le)。
| EM單位的(de)特點
1. em的(de)值并不是固定的(de)；
2. em會繼承父級元素的(de)字體大(dà)小
所以我們在寫CSS的(de)時(shí)候，需要注意兩點
1. body選擇器中聲明(míng)Font-size=62.5%；
2. 将你的(de)原來(lái)的(de)px數值除以10，然後換上em作爲單位；
3. 重新計算(suàn)那些被放大(dà)的(de)字體的(de)em數值。避免字體大(dà)小的(de)重複聲明(míng)。
也(yě)就是避免1.2 * 1.2= 1.44的(de)現象。比如說你在#content中聲明(míng)了(le)字體大(dà)小爲1.2em，那麽在聲明(míng)p的(de)字體大(dà)小時(shí)就隻能是1em，而不是1.2em, 因爲此em非彼em，它因繼承#content的(de)字體高(gāo)而變爲了(le)1em=12px。
| rem單位的(de)特點rem
是CSS3新增的(de)一個(gè)相對(duì)單位（root em，根em），這(zhè)個(gè)單位引起了(le)廣泛關注。這(zhè)個(gè)單位與em有什(shén)麽區(qū)别呢(ne)？區(qū)别在于使用(yòng)rem爲元素設定字體大(dà)小時(shí)，仍然是相對(duì)大(dà)小，但相對(duì)的(de)隻是HTML 根元素。這(zhè)個(gè)單位可(kě)謂集相對(duì)大(dà)小和(hé)絕對(duì)大(dà)小的(de)優點于一身，通(tōng)過它既可(kě)以做(zuò)到隻修改根元素就成比例地調整所有字體大(dà)小，又可(kě)以避免字體大(dà)小逐層複合的(de)連鎖反應。目前，除了(le)IE8及更早版本外，所有浏覽器均已支持rem。
選擇使用(yòng)什(shén)麽字體單位主要由你的(de)項目來(lái)決定，如果你的(de)用(yòng)戶群都使用(yòng)最新版的(de)浏覽器，那推薦使用(yòng)rem，如果要考慮兼容性，那就使用(yòng)px,或者兩者同時(shí)使用(yòng)。
