em和pt - CSS中被忽略的單位

  前言

    CSS一般來說不太被重視,但是裏面的東西都繁瑣,須要大量的時間和經驗的積累,平時咱們定義大小或者寬高使用的都是px單位,也就是像素.CSS所提供的單位不止px一種,還有em和pt.

  正文

    咱們平常使用最多的是px,也就是像素,它是相對於顯示器分辨率的而言的相對長度.可是一些網頁放大功能,尤爲是在IE下沒法放大.em是一個什麼樣的單位呢?

按照CSS2.0的定義,em也是一個相對單位,相對於當前對象內文本大小.若是當前對象內文本大小未被設置,則按照瀏覽器默認大小.

    若是按照這麼說,咱們能夠理解,px是相對於顯示器的,em是相對於當前文本的,因此px對於咱們來講就是絕對單位了,而em則是相對的大小.一般來說若是你的瀏覽器未經調整,那麼默認的字體高度是16px,因此這裏的16px = 1em.

  em

    若是你們關注過Bootstrap的CSS的話,常常能夠看見這種定義font-size: 62.5%;這個其實就是爲了em的設置,以前說過了默認狀況下16px = 1em.爲了方便計算咱們一般能夠在body中聲明font-size:62.5%;這樣的話就變成16px * 0.625 = 1em,也就是px只要除以10就能夠換成em單位了.

    em沒有固定的大小,是真正的相對單位,而且em會繼承父元素的字體大小.這裏尤其注意的就是em是有繼承特性的!

  pt

    pt也就是point單位,這個單位咱們平時用到的更少了,坦白說這裏也不太推薦你們使用,作個科普知道下就能夠了.

    首先說明一下爲何用的不多,由於pt單位主要實在印刷或者輸出設備而言,它是一個絕對單位或者說物理單位.在傳統印刷排版中1pt是1/72英寸,一般狀況下9pt = 9 * 1/72 * 96(DPI) = 12px;這裏涉及到DPI的概念因此很少說,你們對pt有個概念就行,如今通常狀況下用px代替它.

    最後附一個網上找到的單位轉換圖,感謝原做者.