2019獨角獸企業重金招聘Python工程師標準>>>

前言

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代替它.

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

轉載於:https://my.oschina.net/blogshi/blog/209927