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

Answer 1

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

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

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

Answer 2

单位rem(root em)代表根元素的字体大小.在HTML文档中,根元素是html元素.浏览器支持仍然有限.

Answer 3

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

Answer 4

虽然em相对于其直接或最近父级的字体大小,但rem仅相对于html(root)font-size.

em可以控制设计区域.同样,相对地缩放该特定区域中的类型. rem可以轻松地在整个页面上缩放类型.

Answer 5

这是一个例子。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>

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 像素 x 160 像素（除非你没有浏览器默认值16px）。这是因为该html元素的浏览器默认值font-size是16pxand 10rem* 16px= 160。

里面的广场10em很大。因为它的父元素是5px正方形是 5em * 10px = 50px。

这有什么用：

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

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