Rem 和 em 在 CSS 中有什么不同？

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

演示

超文本标示语言

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

CSS

div {
font-size: 1.4rem;
}


div p {
font-size: 1.4rem;
}
64605 次浏览
小开
最佳答案

EM是相对于他们父母的字体大小

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

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

小开

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

小开

虽然 [俄语]是相对于它的直接或最近的父字体大小，雷姆只是相对于 html (根)字体大小。

Em 赋予了控制一个设计区域的能力。比如，在那个特定的区域相对比例的类型。 Rem 可以轻松地缩放整个页面的类型。

小开

这里有一个例子。当我们改变 html元素的 font-size时，使用 rem改变 divs的大小。而那些大小与 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>

小开

基本上，在 CSS 中，Em是相对于最近的父页面，而 雷姆是相对于页面的父页面，通常是 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: 一个相对于 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元素 font-size的浏览器默认值是 16px，而 10rem * 16px = 160。

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

这有什么用:

将所有单元设置为 rem有以下优点:

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

Em 和 rem 是基于字体的相对单位，使用 ems 表示字体或长度是不同的，所以 ems 和 rem 都是基于字体的，但它们之间的区别是 ems 使用 家长或 目前元素作为参考，而 rem 使用根字体大小作为参考。

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

在下面的例子中，头部子元素上的三个 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 元素来定义

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

小开

CSS 测量单位: Em，雷姆都相对于它们的父母前面的大小。大小将根据其父母字体大小而变化。 例如:
Rem : 根元素字体大小的100% 。
Em : 100% 的父字体大小。

小开

EM 是相对于它的直接或最近的父字体大小，和 REM 只是相对于 html (根)字体大小。

小开

主要问题在于使用“ em”和“ rem”时有一个父字体大小... ..。 下面是一个例子: 假设我想要的字体大小2em 为我的网站的主体，所以我们包括2em 字体大小的主体，这是所谓的父母字体大小..。 再次为我的 H1我想一个5.6大小的东西，在我们点击保存和头回到我们的网站，刷新，然后我们会注意到，我们的 H1现在已经超过5.6。 发生这种情况是因为字体被继承并添加到它从父代获得的任何东西之上... ... (当我们使用 em 和百分比时，这个问题就会发生) 因此，为了解决这类问题，程序员使用 rem。

小开

只是一些示例 CSS，以显示如何 rem将工作，注意 根字体大小设置使用 Px通过 Html标记

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 设置为 1em，则段落将继承其父元素的 18px font-size。我知道这个示例不是特别有用，但是希望它能够帮助说明 em和 rem之间的区别。


提交答案