Question

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

HTML

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

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

Answer 1

EM s与父母的字体大小相关

REM s相对于基本字体大小

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

Answer 2

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

Answer 3

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

em 可以控制设计区域。同样，相对地缩放该特定区域中的类型。 rem 可以轻松扩展整个页面的类型。

Answer 4

这是一个例子。当我们更改divs元素的rem时，font-size的大小会因html而发生变化。鉴于em的大小只会随着我们更改font-size的{{1}}而改变。

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;
}

Answer 5

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

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

＆＃13;

html {
  font-size: 16px;
}

.lg-font {
  font-size: 30px;
}

p.rem {
  font-size: 1rem;
}

p.em {
  font-size: 1em;
}

＆＃13;

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

＆＃13;

Answer 6

摘要：

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像素乘以160像素（除非您没有将浏览器默认设置为16px）。这是因为html元素font-size的浏览器默认值为16px且10rem * 16px = 160。

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

这如何有用：

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

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

Answer 7

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

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

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

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

Answer 8

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

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

Answer 9

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

Answer 10

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

进行定义

rem 相对单位仅由 root html元素计算，因此，父元素的字体大小不会对其造成影响

Answer 11

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

Answer 12

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

在CSS中，rem与em有何不同？

12 个答案:

摘要：

这如何有用：