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