前段時間，終于仔仔細細的把pt、px、em、rem了解了一遍，簡單整理了一下做個記錄。
pt、px、em、rem都是什么
pt單位名稱為點（Point），絕對長度單位?，F(xiàn)在網(wǎng)頁中出現(xiàn)得很少甚至不出現(xiàn)，常用于印刷行業(yè)。
單位換算：1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
px單位名稱為像素，相對長度單位，像素px是相對于顯示器屏幕分辨率而言的。像素的使用性特別廣。
em單位名稱為相對長度單位。它沒有一個固定數(shù)值，相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。
rem是CSS3新增的一個相對單位（root em，根em）， rem是相對單位，是相對HTML根元素。
四者的特點和關(guān)系
pt是一個標準的長度單位， 1pt＝1/72英寸，常用于印刷當中，在AI、PS等設計軟件當中字體大小所用的單位就是pt，它在廣告印刷業(yè)當中十分受歡迎，也非常的好用。但現(xiàn)在在網(wǎng)頁當中，pt幾乎不出現(xiàn)了。
優(yōu)點：適用于印刷業(yè)
缺點：網(wǎng)頁幾乎不用了
px是屏幕上顯示的最小單位，所以在網(wǎng)頁當中非常受歡迎，因為精準也非常的直觀和方便。一些設計類也會使用到px。
優(yōu)點：精確穩(wěn)定
缺點：在瀏覽器中放大或縮小頁面后，頁面會出現(xiàn)混亂的情況
em這個單位就比較強大了，它是個相對長度單位，擁有著可變的彈性特征。這個單位也受到大部分前端設計師的喜愛，因為是相對數(shù)值，所以我們可以設置1em、0.5em、0.25em等，且支持到小數(shù)點后三位數(shù)，頁面也會隨頁面的放大縮小而做相對應的調(diào)整。
優(yōu)點：靈活變化
缺點：會繼承父級元素的字體大小
rem這個單位相比em更強大，可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就可以成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。 目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。
優(yōu)點：更加靈活人性化，不受父級元素影響
缺點：。。。原諒我暫時想不出來
pt和px的區(qū)別
pt和px其實都有被應用于印刷業(yè)當中，在web或app中，px更精準，設置后就不會改變。而pt可能會根據(jù)顯示器的像素密度會有所改變，因為px是相對單位，pt是絕對單位。
大家在做網(wǎng)頁或者app，都是為了瀏覽，所以比較建議大家使用px來定義字號。使用px定義文字，無論用戶怎么設置，都不會改變大??；使用pt定義文字，當用戶設置超過96DPI的值，數(shù)值越大，字體就越大。
轉(zhuǎn)化公式：px = pt * DPI / 72
em和rem的區(qū)別
我以前用em做網(wǎng)站，覺得哇！這個元素真好用。后來發(fā)現(xiàn)rem，更是覺得發(fā)現(xiàn)寶藏一樣，比em更好用。em和rem其實都是靈活的，因為它們都是一個相對單位，可靈活、可擴展的單位。一般都是由瀏覽器轉(zhuǎn)換成具體像素值，具體轉(zhuǎn)化后的數(shù)值取決與設置的字體大小。
可以說這兩個單位都可以使我們的web或app界面設計更靈活，既然這兩者都可以達到一樣的效果，那具體區(qū)別在哪里呢？
rem 單位翻譯為像素值是由 html 元素的字體大小決定的。 此字體大小會被瀏覽器中字體大小的設置影響，除非顯式重寫一個具體單位。
em 單位轉(zhuǎn)為像素值，取決于他們使用的字體大小。 此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。
如何換算
以前一直用px，后來在做自適應的時候就會發(fā)現(xiàn)很多問題。直到發(fā)現(xiàn)了em和rem，簡直讓人欣喜若狂。但是px和em之間的換算比較讓人頭疼。簡單看看是如何換算的吧。
em和px的之間的相互轉(zhuǎn)換： 任意瀏覽器的默認字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。 為了使用方便，用em時，我們通常在CSS中的body選擇器中聲明font-size=62.5%（使em值變?yōu)?16px*62.5%=10px）, 之后，你只需要將你使用的px值除以10，即可得到em值，如：12px=1.2em, 10px=1em。
腦筋轉(zhuǎn)得慢的或者偷懶的跟我一樣用工具換算吧。http://pxtoem.com/
