css中單位px和em的區別

來源:互聯網
上載者:User
關鍵字 網頁製作 CSS教程

px圖元(pixel)相對長度單位是相對於顯示器螢幕解析度而言的(引自css教程2.0手冊)。

em相對長度單位是相對於當前物件內文本的字體尺寸而言的,如當前對行內文本的字體尺寸未被人為設置,則相對於瀏覽器的預設字型尺寸(引自css2.0手冊)。

任意瀏覽器的預設字型高都是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會繼承父級元素的字體大小。

所以我們在寫css的時候,需要注意兩點:

1、body選擇器中聲明font-size=62.5%;
2、將您的原來的px數值除以10,然後換上em作為單位;
3、重新計算那些被放大的字體的em數值,避免字體大小的重複聲明。

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

國內的設計師大都喜歡用px,而國外的網站大都喜歡用em,那麼兩者有什麼區別,又各自有什麼優劣呢?

1、ie無法調整那些使用px作為單位的字體大小;

2、國外的大部分網站能夠調整的原因在於其使用了em作為字體單位;

3、firefox能夠調整px和em,但是96%以上的中國線民使用ie瀏覽器(或內核)。

px圖元(pixel)相對長度單位是相對於顯示器螢幕解析度而言的(引自css2.0手冊)。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.