首頁 > web前端 > css教學 > 詳解CSS中單位px與em的區別

詳解CSS中單位px與em的區別

高洛峰
發布: 2017-03-08 13:22:09
原創
2191 人瀏覽過

用px定義字體,無法用瀏覽器字體放大功能,而國外大多數網站可以在IE瀏覽器中使用。

原因:

  1.IE無法調整px為單位的字體大小。

  2.國外大部分使用em為字體單位。

px,em都為相對長度單位,

  px是相對於顯示器解析度而言的。

  em是相對於目前物件內文字的字體尺寸,如果目前物件內文字字體尺寸未被人設置,則相對於瀏覽器的預設字體尺寸。

    任意瀏覽器的預設字體都是16px,所有未經設定的瀏覽器都符合: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有以下特點:

  1.em的值並不是固定的。

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

因此需要強調:

  1.body選擇器中宣告font-size=62.5%

  2.將原來的px數值除以10,然後換上em為單位

  3.重新計算那些被放大的字體的em值,避免字體大小重複聲明。

注意事項:

  用以上方法的得到的12px(1.2em)漢字,在IE中並不等於直接用12px定義的字體大小,而是稍大一些。

  需要在body選擇器中把62.5%換成63%就能正常顯示了。

  原因可能是IE處理漢字時,對浮點的取值精確度有限。

以上所述是小編給大家介紹的徹底弄清楚CSS中單位px與em的區別,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回复大家的。在此也非常感謝大家對PHP中文網的支持!

以上是詳解CSS中單位px與em的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板