CSS中rem和em有什么区别？

Question

在网站源代码中，我有时看到开发人员使用rem单位。它是否类似于em？我尝试了一下以查看它实际上的作用，但是相对于什么呢？

演示

HTML

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

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

- Mr. Alien

Answer 1

EM相对于其父元素的字体大小而言。

REM相对于基准字体大小而言。

当中间容器改变字体大小时，这一点非常重要。使用EM的子元素将受到影响，而使用REM的子元素则不会受到影响。

- Diodeus - James MacFarlane

---

除了这个答案外，em 单位相对于它们所用的元素的字体大小（而不是父元素）。W3C 定义，Codepen 演示。 - Jay

Answer 2

单位rem（根em）代表的是根元素的字体大小。在HTML文档中，根元素就是html元素。

- Jukka K. Korpela

Answer 3

em 相对于其直接或最近父级元素的字体大小进行调整，而 rem 只相对于 html（根）的字体大小进行调整。

em 允许控制设计中的某个区域。例如，在该特定区域内相对地缩放字体大小。 rem 则可以轻松地在整个页面上缩放字体大小。

- Jayesh Panchal

Answer 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>

- Alireza

Answer 5

总结：

• rem：是一个相对于html元素字体大小的CSS单位。
• 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>

在上面的示例中，绿色正方形大小为160px * 160px（除非您的浏览器默认值不是16px）。这是因为html元素的字体大小默认为16px，所以10rem * 16px = 160。

内部正方形大小为10em。由于其父元素大小为5px，所以正方形大小为5em * 10px = 50px。

这样使用rem单位的优点如下：

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

- Willem van der Veen

Answer 6

这是一个例子。使用rem大小的divs会随着我们更改html元素的font-size而变化。使用em大小的divs只会随着我们更改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>

- Shaun Luttin

Answer 7

这里有一些CSS示例，展示rem如何工作。请注意，根元素的字体大小是通过html标签以px为单位设置的。

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

并对应的HTML代码：

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

由于 <p> 标签设置为 1rem，它会忽略父级 div 的字体大小为 18px。然而，如果我们将字体大小设置为 1em，则段落将继承其父元素的 18px 字体大小。我知道这个例子并不特别有用，但希望它可以帮助说明 em 和 rem 之间的区别。

- Van Vo

Answer 8

在em相对单位中，字体大小是基于最近的父元素字体大小来衡量的，但如果任何父元素没有定义字体大小，则默认情况下将根据根html元素定义字体大小。 rem相对单位仅由根html元素计算，因此父元素的字体大小不会影响它。

- H S W

Answer 9

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

如果我们想要使用ems作为字体大小，则参考值就是父元素计算出的字体大小，类似于百分比的情况。

在下面的例子中，标题子元素上的三个ems字体大小结果为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。

- Rafiq

Answer 10

CSS 计量单位：em，rem，两者均相对于它们的父元素字体大小。大小将随其父元素字体大小而变化。 例子：
rem：根元素字体大小的 100%。
em：父元素字体大小的 100%。

- Taib Islam Dipu