深究 CSS中px rem與em的區別

前言:隨著pc端的網頁盛行,移動端作為重要的一部分,也是火熱的發展,但是鑑於一些單位的使用,我們並不知道該怎樣去使用,那麼今天我們來看看常用的三種單位px、rem與em。

二.em

三.rem

四.總結

px畫素（pixel）。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。

px:px是pixel的縮寫，是畫素單位也是為影像顯示的基本單位，譯自英文「pixel」，pix是英語單詞picture的常用簡寫，加上英語單詞「元素」element，就得到pixel，故「畫素」表示「畫像元素」之意，有時亦被稱為pel（picture element）。

畫素:畫素是指在由乙個數字序列表示的影象中的乙個最小單位，稱為畫素。畫素是解析度的單位，解析度越高,那麼顯示效果就越精細和細膩。相機所說的畫素，其實是最大畫素的意思，這個畫素值僅僅是相機所支援的有效最大解析度。

.box

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

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

firefox能夠調整px和em，rem，但是96%以上的中國網民使用ie瀏覽器(或核心)。

em:em是相對長度單位。其相對於當前物件內文字的font-size，如果當前文字的字型尺寸沒有設定，則相對於瀏覽器的預設字型尺寸。

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作為單位就行了。

所以我們在寫css的時候，需要注意幾點：

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

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

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

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

em 單位取決於乙個font-size值而非 html 元素的字型大小。

為此，em 單位的主要目的應該是允許保持在乙個特定的設計元素範圍內的可擴充套件性

例如，您可能使用em 值設定導航選單項的padding、 margin，line-height等值。帶有0.9rem 字型大小的選單

通過這種方式，如果您更改選單的字型大小選單項周圍的間距將在剩餘的空間按比例縮放。

body

.box

有乙個比較普遍的誤解，認為 em 單位是相對于父元素的字型大小。 事實上，根據w3標準 ，它們是相對於使用em單位的元素的字型大小。父元素的字型大小可以影響 em 值，但這種情況的發生，純粹是因為繼承。

rem:是css3新增的乙個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什麼區

別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。這個

單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大

小，又可以避免字型大小逐層復合的連鎖反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。對

於不支援它的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字

體大小。

html

.box

根html元素將繼承瀏覽器中設定的字型大小，除非顯式設定固定值去覆蓋。所以html元素的字型大小雖然是

直接確定rem值，但字型大小可能首先來自瀏覽器設定。因此瀏覽器的字型大小設定可以影響每個使用 rem

單元以及每個通過em單位繼承的值。

rem單位提供最偉大的力量並不僅僅是他們提供一致尺寸而不是繼承。 相反，它給我們的乙個途經去獲取用

戶的偏好來影響**中每一處使用rem的元素大小，不再是使用固定的px單位。為此，使用rem單位的主要

目的應該是確保無論使用者如何設定自己的瀏覽器，我們的布局都能調整到合適大小。

rem單位翻譯為畫素值是由 html 元素的字型大小決定的。 此字型大小會被瀏覽器中字型大小的設定影響，除非顯式重寫乙個具體單位。

em單位轉為畫素值，取決於他們使用的字型大小。 此字型大小受從父元素繼承過來的字型大小，除非顯式重寫與乙個具體單位。

對於只需要適配少部分手機裝置，且解析度對頁面影響不大的，使用px即可 。

對於需要適配各種移動裝置，使用rem，例如只需要適配iphone和ipad等解析度差別比較挺大的裝置。

rem和em單位是由瀏覽器基於你的設計中的字型大小計算得到的畫素值。

em單位基於使用他們的元素的字型大小。

rem單位基於html元素的字型大小。

em單位可能受任何繼承的父元素字型大小影響

rem單位可以從瀏覽器字型設定中繼承字型大小。

使用em單位應根據元件的字型大小而不是根元素的字型大小。

在不需要使用em單位，並且需要根據瀏覽器的字型大小設定縮放的情況下使用rem。

使用rem單位，除非你確定你需要em單位，包括對字型大小。

**查詢中使用rem單位

不要在多列布局中使用em或rem改用%。

不要使用em或rem，如果縮放會不可避免地導致要打破布局元素。

px,rem和em的區別

px的特點 1.ie無法調整那些使用px作為單位的字型大小，國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 2.firefox能夠調整px和em，rem，但是96 以上的中國網民使用ie瀏覽器 或核心 3.px畫素，相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。em 1.e...

css中em與px的區別

em是何物？em指字型高，任意瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合 1em 16px。那麼12px 0.75em,10px 0.625em。為了簡化font size的換算，需要在css中的body選擇器中宣告font size 62.5 這就使em值變為 16px 62.5 ...

css中em與px的區別

a a 這裡引用的是jorux的 95 的中國 需要重寫css 的文章，題目有點嚇人，但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點，看過以後確實收穫很大。平時都是用px來定義字型，所以無法用瀏覽器字型放大的功能，而國外大多數 都可以在ie下使用。因為 1 ie...