Rems在CSS中替換ems嗎？

我在讀約rem units in CSS3，並有點困惑。如果您使用rem，您仍然使用em還是替換它？Rems在CSS中替換ems嗎？

例如：

.selector { 
    margin-bottom:24px; 
    margin-bottom:2.4rem; 
    font-size:16px; 
    font-size:1.6rem; 
}

或

.selector { 
    margin-bottom:24px; 
    margin-bottom:2.4em; 
    margin-bottom:2.4rem; 
}

只是想弄清楚，如果rem需要的em的地方，或者如果它只是一個單元。

2011-11-11 jfrosty

包括更好的鏈接:) – 2011-11-11 22:54:59

http://snook.ca/archives/html_and_css/font-size-with-rem涵蓋了rem和em之間的區別。 – mjwills

我覺得REM分手了。 –

Rem是根（html）元素的em大小。這意味着一旦你定義了html元素的字體大小，你可以定義所有的rem單位。

例如：

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */ 
h1 { font-size: 2.4rem; } /* =24px */

雷姆是在Safari 5瀏覽器，Firefox 3.6+，甚至Internet Explorer支持，但對於older browsers你仍然必須使用他們，百分比或像素。

2011-11-12 01:05:19 jQuerybeast

主要區別在於'rem'允許您設置'font-size'相對於'html'元素的*根字體大小*（如上所述），**不**相對於* font-size一個父元素*。 IE支持？ > = 9. –

+11

如果您要從網絡提取代碼，提供源代碼很有禮貌：http://snook.ca/archives/html_and_css/font-size-with-rem或者是Snook拿走它從這裏？？ –

同時使用px和rem。像上面的代碼集font-size：14px;字體大小1.4rem。 rem將適用於現代瀏覽器，px適用於rem不支持的瀏覽器。（來源：snook.ca） – Orahmax

不，這是一個不同的單位。 em基於父級的字體大小，而rem基於根字體大小，我認爲它是html元素的字體大小。

2011-11-11 22:57:04 prodigitalson

那麼，我有沒有正確的例子？你會如何正確使用REM？ – jfrosty

根據你的意圖，任何一個都可能是正確的。「2.4em」與「2.4rem」不一定相同，它們從不同的元素中獲得它們的基礎值，因此如果這些元素具有不同的字體大小，那麼您的邊距將會不同。 – prodigitalson

Rem只是一個單位，它並不像EM那樣取代em並不代替像素。

2011-11-12 01:48:00 Litek

古怪的話題，但我認爲它需要更清晰。

兩個em和rem是相對單位，但rem是總是相對於html字體大小（「根」元素），而不是繼承的字體大小。

從來沒有使用px或pt在這個問題上，在屏幕上。通過對字體大小進行硬編碼，您可以忽略用戶的個人偏好字體設置並縮小縮放協作。

em和rem都可以發揮作用。兩者都不適合所有場合。下面是一些例子：

使用rem避免混上漿：

ul#something li { font-size: 1.2rem; } 
    … or … 
ul#something li { font-size: 1.2rem; }

第一個將導致嵌套列表具有逐漸較大尺寸，由於em單元將從父li元素繼承。

使用rem設置大小獨立：

article { font-size: .8rem; }  /* article base font size */ 
article>h2 { font-size: 2rem; }  /* … except for h2 */

，當然你可以同時使用：

div#something { font-size: 1.2rem; }  /* based on html size */ 
div#something>h2 { font-size: 2em; }  /* based on div#something */

兩年走下賽場，現在，我們可以使用它，安全地忽略Legacy瀏覽器。

2016-07-10 07:54:43 Manngo

回答