rem 与 CSS 中的 em 有何不同？答案

【问题标题】：How does rem differ from em in CSS?rem 与 CSS 中的 em 有何不同？
【发布时间】：2012-12-06 03:35:10
【问题描述】：

在网站源代码中，我有时会看到开发人员使用rem 单元。是不是类似于em？我试着看看它实际上做了什么，但它与什么相关？

HTML

<div>Hello <p>World</p></div>

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

【问题讨论】：

标签： css

【解决方案1】：

EMs 相对于其父级的字体大小

REMs 是相对于基本字体大小的

这在中间容器更改字体大小时很重要。使用 EM 的子元素会受到影响，使用 REM 的子元素不会。

【讨论】：

除了这个答案，[em units are relative to the font size of the element they’re used on, (not the parent element)] [W3C definition] [Codepen demo]

【解决方案2】：

The unit rem (root em) 代表根元素的字体大小。在 HTML 文档中，根元素是 html 元素。

【讨论】：

【解决方案3】：

虽然 em 是相对于其直接或最近父级的字体大小，但 rem 仅相对于 html（根）字体大小。

em 提供了控制设计区域的能力。如，相对缩放该特定区域中的类型。 rem 提供了在整个页面上轻松缩放字体的能力。

【讨论】：

【解决方案4】：

基本上 em 是相对于 CSS 中最近的父级，而 rem 是相对于页面的父级，通常是 html 标签...

如果您运行下面的 css 以及父级如何影响它，您会清楚地看到差异：

html {
  font-size: 16px;
}

.lg-font {
  font-size: 30px;
}

p.rem {
  font-size: 1rem;
}

p.em {
  font-size: 1em;
}

<div class="lg-font">
  <p class="em">Hello World - em</p>
</div>

<div class="lg-font">
  <p class="rem">Hello World - rem</p>
</div>

【讨论】：

【解决方案5】：

总结：

rem ：CSS 单位，与 html 元素的字体大小相关。
em ：CSS 单位，相对于父元素的字体大小。

例子：

.element {
  width: 10rem;
  height: 10rem;
  background-color: green;
  font-size: 5px;
}

.innerElement {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<div class="element">
  <div class="innerElement"></div>
</div>

在上面的示例中，绿色方块为 160 像素 x 160 像素（除非您的浏览器默认设置为 16px）。这是因为html元素font-size的浏览器默认是16px和10rem * 16px = 160。

里面的正方形是10em大。因为它的父元素是5px，所以正方形是5em * 10px = 50px。

这有什么用：

通过将所有单位设置为rem 具有以下优点：

我们可以使用一个 CSS 媒体查询来扩展整个应用程序，在这个媒体查询中我们可以指定字体大小。通过更改字体大小，所有具有rem 单位的元素都会相应地缩放。
当用户不使用默认浏览器字体大小16px 时，我们的应用程序将根据用户选择的字体大小进行缩放。

【讨论】：

【解决方案6】：

这是一个例子。 divs 的大小随着rem 的变化而变化，因为我们更改了html 元素的font-size。而em 的大小只会随着我们更改div 的font-size 而改变。

$(function() {
  var htmlSize = $('input#html');
  htmlSize.change(function() {
    $('html').css('font-size', htmlSize.val() + 'px');
  });

  var divSize = $('input#div');
  divSize.change(function() {
    $('div').css('font-size', divSize.val() + 'px');
  });
});

* {
  float: left;
  font-size: 20px;
  margin:2px;
}
label {
  clear:both;
}
div {
  border: thin solid black;
}
div.rem1 {
  width:4rem;
  height: 4rem;
  clear: both;
}
div.rem2 {
  width: 3rem;
  height: 3rem;
}
div.em1 {
  width: 4em;
  height: 4em;
  clear: both;
}
div.em2 {
  width: 3em;
  height: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
  <input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size 
  <input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>

【讨论】：

【解决方案7】：

在 em 相对单位中，字体大小是在 最近的父字体大小 的基础上测量的，但如果没有为任何父元素定义字体大小，则默认情况下字体大小将根据根html元素

定义

rem相对单位仅由根html元素计算，因此，父元素的字体大小不影响它

【讨论】：

【解决方案8】：

只是一些示例 CSS 来展示 rem 将如何工作，注意 root 字体大小是通过 html 标签使用 px 设置的

html, body { font-size: 16px; }
div { font-size: 18px; }
p { font-size: 1rem; }

以及对应的HTML：

<div>
  <p>Lorem Ipsum</p>
</div>

因为<p> 标签设置为1rem，它会忽略18px 的父div’s font-size。但是，如果我们改为将 font-size 设置为 1em，则段落将继承其父元素的 18px font-size。我知道这个例子不是特别有用，但希望它可以帮助说明em 和rem 之间的区别。

【讨论】：

【解决方案9】：

em 和 rem 是基于字体的相对单位，使用 em 表示字体或表示长度是不同的，因此 em 和 rem 都是基于字体的，但它们之间的区别在于 em 使用 parent 或 current 元素作为参考，而 rems 使用根字体大小作为参考。

如果我们想将 ems 用于字体大小，那么参考只是父代计算的字体大小，类似于百分比。

在下面的示例中，标题子元素上的 3 em 字体大小导致 72 像素，因为这是父字体大小的三倍，即 (150/100)*16=24px。现在就长度而言，它只是有点不同。标题上的 2em 填充，因为它是长度测量，使用当前元素的字体大小作为参考，我们已经知道这是 24 像素，所以 2em 将导致 48 像素填充，明白了吗？这是一个微妙的区别，但很重要。当您使用 em 时，如果它用于字体，则引用是父元素，而对于长度，引用是当前元素。

html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}

关于 rem，它实际上对字体大小和长度的工作方式相同，因为它总是只使用根字体大小作为参考。这意味着我们这里的 10 rem 填充将导致 160 像素，因为根字体大小为 16。

【讨论】：

【解决方案10】：

CSS 测量单位：em、rem 均相对于其父项的正面尺寸。大小将根据其父母字体大小而变化。示例：
rem：根元素字体大小的 100%。
em：父元素字体大小的 100%。

【讨论】：

【解决方案11】：

EM 与其直接或最近父级的字体大小相关，而 REM 仅与 html（根）字体大小相关。

【讨论】：

【解决方案12】：

当有父字体大小时，主要问题是使用“em”和“rem”...... **这里是示例：假设我想要我的网站正文的字体大小为 2em，所以我们在正文中包含 2em 字体大小，这被称为父字体大小...... 再次对于我的 H1，我想要 5.6 的大小，在我们点击保存并返回我们的网站并刷新之后，我们会注意到我们的 H1 现在已经超过 5.6。发生这种情况是因为字体被继承并添加到它从其父级获得的任何内容之上......（当我们使用 em 和百分比时会发生这个问题）因此，为了摆脱这类问题，程序员使用 rem。

【讨论】：