說說css中pt、px、em、rem都扮演了什麼角色

前段時間，終於仔仔細細的把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/