CSS中是否正在用rem替代em？

Question

17

我在阅读有关CSS3中rem单位的内容时，有些困惑。如果你使用rem，是否仍需要使用em，还是替代了它？

例如：

.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，还是只是另一种单位。

- alyus

为了更好地链接，请包含链接 :) - user166390

2

http://snook.ca/archives/html_and_css/font-size-with-rem 介绍了 rem 和 em 之间的区别。 - mjwills

4个回答

13

不是同一个单位。 em 基于父元素的字体大小，而rem 基于根字体大小，我认为这是 html 元素的字体大小。

- prodigitalson

那么，我提供的这两个例子都正确吗？你如何正确使用REM？ - alyus

3

根据您的意图，两种方式都可能是正确的。问题在于 2.4em 不一定等同于 2.4rem，它们的基准值来自不同的元素，因此如果这些元素具有不同的字体大小，则您的边距也将不同。 - prodigitalson

3

Rem只是一个单位，它并没有取代em，就像em没有取代像素一样。

- Litek

0

老生常谈的话题，但我认为它需要更多的明确性。

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 */

两年过去了，现在我们可以使用它，安全地忽略遗留浏览器。

- Manngo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jQuerybeast · Accepted Answer

Rem是根元素（html）的em大小。这意味着一旦您定义了html元素的字体大小，您就可以定义所有rem单位相对于它。

例如：

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

Rem 在 Safari 5、Chrome、Firefox 3.6+ 甚至 Internet Explorer 中都得到了支持，但是对于旧版浏览器，你仍然需要使用 em、百分比或 px。