rem与CSS中的em有何区别？

在网站资源中，我有时看到开发人员使用该rem单元。类似于em吗？我尝试过查看它的实际作用，但是它相对于什么呢？

演示版

的HTML

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

的CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

EM相对于其父母的字体大小

REM相对于基本字体大小

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

单位rem（根em）代表根元素的字体大小。在HTML文档中，根元素是html元素。浏览器支持仍然有限。

尽管em与其直接或最接近的父字体的字体大小有关，但是rem仅与html（根）字体大小有关。

em赋予了控制设计区域的能力。如图所示，在该特定区域中相对缩放类型。 rem可以轻松在整个页面上缩放类型。

这是一个例子。divs与尺寸rem的变化，因为我们改变font-size了的html元素。而那些尺寸em只有变化，我们改变font-size的div。

$(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>

基本上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>

概要：

• 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我们应用程序的字体大小将根据用户选择的字体大小进行缩放。

rem，em和px是CSS中字体大小的不同单位。

em em等于该元素父级的计算字体大小。例如：div元素定义为font-size：16px，其子元素1em = 16px。

rem rem值相对于html根元素。例如：如果根元素的字体大小为16px，则所有元素的1 rem = 16px。

参考：https： //medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

https://stackoverflow.com/a/13941345/9093112-这是最佳答案，但我只想添加

Default browser size is 16px = 1em = 1 rem

em和rem是基于字体的相对单位，使用ems作为字体或长度是不同的，因此ems和rems都是基于字体的，但是它们之间的区别是ems使用父元素或当前元素作为引用，而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。

以em相对单位为单位，字体大小是根据最接近的父字体大小来衡量的，但是如果未为任何父元素定义字体大小，则默认情况下，字体大小将根据html根元素进行定义

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

CSS度量单位：em，rem都相对于其父母的前围尺寸。大小将根据其父字体大小而变化。示例：
rem：根元素字体大小的100％。
em：父字体大小的100％。