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

zhengqiaoyin發表於2017-11-23
CSSREM


前段時間，終於仔仔細細的把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其實都有被應用於印刷業當中，在web或app中，px更精準，設定後就不會改變。而pt可能會根據顯示器的畫素密度會有所改變，因為px是相對單位，pt是絕對單位。
大家在做網頁或者app，都是為了瀏覽，所以比較建議大家使用px來定義字號。使用px定義文字，無論使用者怎麼設定，都不會改變大小；使用pt定義文字，當使用者設定超過96DPI的值，數值越大，字型就越大。
轉化公式：px = pt * DPI / 72

我以前用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/




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

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。

相關文章