響應式布局中為什麼要使用em設定字型大小而不用px

2022-01-30 17:01:51 字數 651 閱讀 2563

px畫素(pixel)。相對長度單位。畫素px是相對於不同裝置顯示器螢幕解析度(pad/phone/pc)而言的。(引自css2.0手冊) 

1em指的是乙個字型的大小,它會繼承父級元素的字型大小,因此並不是乙個固定的值。任何瀏覽器的預設字型大小都是16px。 

px相對的螢幕解析度,而em相對於父級div,所以在響應式布局中使用em更合適,因為任何瀏覽器預設字型大小是固定的,而不同裝置螢幕解析度卻各不相同。

em有如下特點: 

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

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

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

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

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

3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。

1em預設是16px,這裡1em變為10px

繼承body這裡的1.2em是12px

繼承自aside,所以這裡的1em也是12px

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

為什麼要使用響應式開發

允許頁面顯示效果在老舊瀏覽器中有細微的差別,這樣可以使 更易維護,將來更 新的成本也更低。現代瀏覽器可以理解的簡潔 等同於更快速的 快速響應的 在搜尋引擎中 的評級高於慢騰騰的 使用老舊瀏覽器的使用者越來越少,使用現代瀏覽器的使用者越來越多 我們應該支援 大多數!最重要的一點,支援現代瀏覽器,你就能...

為什麼要使用「針式PKM」

針式pkm 是專業的個人知識管理軟體,幫助您合理有效組織知識結構 快速查詢知識,讓更多的精力以更輕鬆的心情投入到工作和學習中!避免搜尋個人知識管理中走彎路,直接獲取專業pkm人士多年實踐經驗結晶於個人應用中。1.比windows資源管理器更合理有效的組織 知識分類體系 2.多種方式快速搜尋知識 3....

C 中為什麼要使用斷言

斷言assert是僅在debug下有效的巨集,當其中的條件為假時,觸發錯誤提示。使用斷言的目的是捕捉不應該發生的非法情況。注意 不要混淆非法情況與錯誤情況之間的區別,後者的出現是因為 錯誤,是一定要作出處理的。如何使用 1 在函式的入口處,使用斷言檢查引數的有效性 合法性 2 在編寫函式時,要進行反...