px和em,rem的區別

2022-07-17 04:06:09 字數 1205 閱讀 5516

任意瀏覽器的預設字型高都是16px。

px: 畫素(pixel) , 計算機螢幕上的乙個點。固定大小;不方便維護;

em:相對於當前物件內 (父元素) 文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸(16px)。相對大小;

rem:相對於html根元素。相對大小;

(所有未經調整的瀏覽器都符合:1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中宣告font-size=62.5%,這就使em值變為16px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。)

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

<

style

>

html

#father

#em#rem

#pxstyle

>

head

>

<

body

>

<

div

id="father"

>

<

div

id="em"

>我是1em

div>

<

div

id="rem"

>我是1rem

div>

<

div

id="px"

>我是32px

瀏覽器的相容性:除了ie6-ie8r,其它的瀏覽器都支援em和rem屬性,px是所有瀏覽器都支援。

em rem和px的區別

本文介紹 px em rem 的區別和他們的用法。px單位的名稱為畫素,它是乙個固定大小的單元,畫素的計算是針對 電腦 手機 螢幕的,乙個畫素 1px 就是 電腦 手機 螢幕上的乙個點,即螢幕解析度的最小分割。由於它是固定大小的單位,單獨用它來設計的網頁,如果適應大螢幕 電腦 在小螢幕 手機 上就會...

css中px和em,rem的區別

國內的設計師大都喜歡用px,而國外的 大都喜歡用em和rem,那麼三者有什麼區別,又各自有什麼優劣呢?px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民...

em rem和px長度單位的區別

px px是固定長度單位,不隨其他元素的變化而變化。px一般比較穩定 精確,如果改變瀏覽器的縮放,頁面布局也會被打破。em em是相對長度單位,隨父級元素屬性font size的變化而變化。rem rem是相對長度單位,隨根目錄的屬性font size的變化而變化。em和rem都是相對長度單位,都需...