css技術 關於單位em的思考

2021-04-12 17:18:52 字數 2517 閱讀 1686

em

說明:相對長度單位。相對於當前物件內文字的字型尺寸。

如當前行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。

這是我手頭的css資料裡面找的,不過說的有些不大清楚,下邊的一些資料有助於更近一步理解:

很長一段時間,我都使用12px作為**的主要字型大小。10px太小,眼睛很容易疲勞,14px雖容易看清,卻破壞頁面的美感。唯獨12px在審美和視力方面都恰到好處。

誰對我的**字型大小有意見?

我老爸,他是第乙個向我反映看不清我的**文字的人。這使我意識到12px,其實只是讓我覺得很不錯而已,而對於那些視力下降明顯的中年以上的人來講,幾乎等於10px對於我的感覺。

於是我告訴他,在「檢視」裡調整「文字大小」就可以了。但是卻發現這是徒勞的。在firefox能輕易調整的字型大小,怎麼在ie就變得如此」堅不可調「?

,網易。它們的字型無一例外的在ie裡失去可調性。看來這不是我**獨有的毛病。再看看msn

,google

,a list apart

,華盛頓郵報

,在ie裡卻是可調的。難道ie在字型調整上也搞歧視不成?

困擾我的問題直到看到這篇大作:how to size text using ems

,才得到徹底的解決。

關鍵點

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

2. 國外的大部分**能夠調整的原因在於其使用了em作為字型單位;

3. firefox能夠調整px和em,但是96%以上的中國網民使用ie瀏覽器(或核心)。這意味這中國**的字型大小可以被認為不可調。

95%的中國**需要重寫css

在我所觀察的中國**中,包括三大門戶,以及「引領」中國**設計潮流的藍色理想

,chinaui

好歹做了個可調的表率。

而在大洋彼岸,幾乎所有的主流站點都使用em作為字型單位,也就是可調的。

沒錯,px比em更加容易使用,我也敢打賭大部分讀者不知道em為何物或者它相當於多少px。

國外人士如此重視**易用性(accessibility),不僅因為其根生蒂固的人文精神,直接原因可能是因為有一部法律來約束他們—例如美國的section 508,強制**達到一定的易用性。所以沒有哪個主流站點願意被那些視力下降或是殘缺的人告上法庭。 em

vs.px

em是何物?

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作為單位;

簡單吧,如果只需要以上兩步就能解決問題的話,可能就沒人用px了。經過以上兩步,你會發現你的**字型大得出乎想象。因為em的值不固定,又會繼承父級元素的大小,你可能會在content這個div裡把字型大小設為1.2em, 也就是12px。然後你又把選擇器p的字型大小也設為1.2em,但如果p屬於content的子級的話,p的字型大小就不是12px,而是1.2em=1.2 * 12px=14.4px。這是因為content的字型大小被設為1.2em,這個em值繼承其父級元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作為其子級,em則繼承content的字型高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告,也就是避免以上提到的1.2 * 1.2= 1.44的現象。比如說你在#content中宣告了字型大小為1.2em,那麼在宣告p的字型大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字型高而變為了1em=12px。

詭異的12px漢字(原因待查)

還可以做哪些改進

為什麼還需改進:

1. 你的**css過於複雜,以至於不知道元素的從屬關係,很難重寫css;

2. 絕大部分人看了本文之後仍然不會重寫css;

3. 很大部分人不知道瀏覽器可以調整頁面的字型大小。

所以你需要乙個諸如本站資訊框中的字型大小調整控制項。

相信本站讀者的英語能力,這裡就不再羅嗦了,請參看:the text changer

以上內容摘錄於《95%的中國**需要重寫css》

CSS中的em單位

css中有眾多單位,常用的px是絕對單位,em則是相對單位。在響應式和移動端的大前提下,使用em能夠更方便快捷的一次性調整web文件極其html元素的字型大小 寬度 邊距 邊框等一系列屬性,可以說在某些方面,使用em作為單位比px更靈活。em是css中的乙個相對單位,它的單位長度是根據元素的文字垂直...

CSS的長度單位 em 與em標籤

css支援多種長度單位。它們可被分成兩大類 絕對長度單位 以不依賴於顯示裝置的絕對尺寸來定義 長度 相對長度 相對其它為瀏覽器所知的單位來定義長度 絕對長度度量可使用五種單位 英吋 in 厘公尺 cm 公釐 mm 磅 point,寫作 pt 字高 pica,寫作pc 磅和字高通常被用作印刷單位,其中...

CSS之EM相對單位

之前以為em單位只是在font size中起到繼承作用,後來慢慢覺得,繼承,應該是在幾乎所有樣式中都可以是實現的,比如height,width,border.今天才簡單測試了下,果真是可以實現,不過,只是要基於font size的一併出現而已!也就是說,想height等樣式也應用上em的繼承相對大小...