css中單位px,em,rem的區別

2022-07-16 11:39:10 字數 587 閱讀 8179

1,px畫素(pixel)。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。

2,em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸

3,rem為元素設定字型大小時,仍然是相對大小,但相對的只是html根元素

4,任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。

那麼12px=0.75em,10px=0.625em。 12px/16px=0.75em

5,為了簡化font-size的換算,需要在css中的body選擇器中宣告font-size=62.5%,

這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em,

也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

6,rem是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。

選擇使用什麼字型單位主要由你的專案來決定,如果你的使用者群都使用最新版的瀏覽器,那推薦使用rem,如果要考慮相容性,那就使用px,或者兩者同時使用。

在這裡為大家提供乙個px,em,rem單位轉換工具

區別CSS單位中的px,em,rem

px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。引自css2.0手冊 px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民使用...

區別css單位px em rem

一般瀏覽器預設1em 16px,通過設定font size大小來代表如 16px 0.625 10px,其則代表1em 10px,直接上 注釋的樣式為瀏覽器預設 1em 16px 的長寬 在進行轉換之前,我們一定要檢視瀏覽器預設字型 最小 大小,如chrome瀏覽器,預設字型最小為12px,所以即使...

CSS尺寸單位 px em rem 詳解

在css中,尺寸單位分為兩類 相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素,又可以分為字型相對單位和視窗相對單位。字型相對單位有 em ex ch rem 視窗相對單位有 vw vh vmin vmax幾種。絕對長度單位則是固定尺寸,它們採用的是物理度量單位 cm mm in px p...