萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS中em和px的區別

CSS中em和px的區別

  Font-size:1.5em;

  其實在國外CSS編寫中,使用em作為單位是很多的,一是人性化考慮,二是受到美國勞工部Section508法案的強行限制。那麼在網頁設計中,常用到的度量單位一共有三種,分別是px/em/pt:

  *px單位名稱為像素,相對長度單位,像素(px)是相對於顯示器屏幕分辨率而言的,國內的網站很多都是采用px作為單位的。

  *em單位名稱為相對長度單位。相對於當前對象內文本的字體尺寸。在國外使用的很多。眾多先進浏覽器【IE除外的基本都是】都支持字體調整。

  *pt單位名稱為點(Point),絕對長度單位,這個很老了,老到胡子都一把了。。基本沒有使用的了。

  第一、em與px之間怎麼換算?

  *任意浏覽器的默認字體高度16px(16像素)。

  *所有未經調整的浏覽器都符合: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作為單位就行了。

  第二、em單位有什麼特點?

  *em的值並不是固定的。

  *em會繼承父級元素的字體大小。

  我們在寫CSS的時候如果要用em為單位,需要注意兩點:

  *body選擇器中聲明Font-size=62.5%;

  *將你的原來的px數值除以10,然後換上em作為單位;

  *重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。

  也就是避免1.2*1.2=1.44的現象。比如說你在#content中聲明了字體大小為1.2em,那麼在聲明的字體大小時就只能是1em,而不是1.2em,因為此em非彼em,它因繼承#content的字體高而變為了1em=12px。

  注:建議不要使用em作為中文站點的文字單位,會導致文字變形十分嚴重的。

copyright © 萬盛學電腦網 all rights reserved