在网站源代码中，我有时会看到开发人员使用该rem单元。它类似于em吗？我试着看看它实际上做了什么，但它与什么相关？
HTML
<div>Hello <p>World</p></div>
CSS
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}
问问题
55625 次
12 回答
187
EMs 相对于其父级的字体大小
REMs 是相对于基本字体大小的
这在中间容器更改字体大小时很重要。使用 EM 的子元素会受到影响，使用 REM 的子元素不会。
于 2012-12-18T20:54:48.920 回答
48
单位rem(root em) 代表根元素的字体大小。在 HTML 文档中，根元素是html元素。
于 2012-12-18T22:07:47.240 回答
26
虽然em与其直接或最近的父级的字体大小相关，但rem仅与 html（根）字体大小相关。
em提供了控制设计区域的能力。如在该特定区域中相对缩放类型。 rem提供了在整个页面上轻松缩放类型的能力。
于 2015-03-02T12:19:27.893 回答
18
基本上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>于 2017-06-12T06:34:33.787 回答
7
概括：
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我们应用程序的字体大小将随用户选择的字体大小进行缩放。
于 2018-09-08T20:31:14.750 回答
6
这是一个例子。随着我们改变元素的divs大小而改变大小。而那些尺寸只有随着我们改变.remfont-sizehtmlemfont-sizediv
$(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>于 2015-08-28T02:08:16.823 回答
2
在em相对单位中，字体大小是在最近的父字体大小的基础上测量的，但是如果没有为任何父元素定义字体大小，则默认情况下，字体大小将根据根 html 元素定义
rem相对单位仅由根 html 元素计算，因此，父元素的字体大小不影响它
于 2020-08-14T17:55:33.837 回答
2
只是一些示例 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它忽略了18px的父div’s字体大小。但是，如果我们将 font-size 设置为1em，则段落将继承其父元素的18px字体大小。我知道这个例子不是特别有用，但希望它可以帮助说明和之间的区别。emrem
于 2021-09-09T13:25:15.753 回答
1
em 和 rem 是基于字体的相对单位，将 ems 用于字体或长度是不同的，因此 ems 和 rem 都是基于字体的，但它们之间的区别在于 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。
于 2020-07-14T08:33:15.363 回答
0
CSS 测量单位：em，rem都相对于它们的父项正面尺寸。大小将根据其父母字体大小而变化。示例：
rem：根元素字体大小的 100%。
em：父字体大小的 100%。
于 2020-09-19T14:12:45.953 回答
0
EM 与其直接或最近父级的字体大小相关，而 REM 仅与 html（根）字体大小相关。
于 2021-04-22T06:36:47.903 回答
0
当有父字体大小时，主要问题在于使用“em”和“rem”...... **这是示例：假设我想要我的网站正文的字体大小为 2em，所以我们包括 2em 字体正文中的大小被称为父字体大小......对于我的 H1，我想要一个 5.6 的大小，在我们点击保存并返回我们的网站并刷新之后，我们会注意到我们的 H1 现在变得超过5.6 . 发生这种情况是因为字体被继承并添加到它从父级获得的任何内容之上......（当我们使用 em 和百分比时会发生这个问题）所以，为了摆脱这种类型的问题，程序员使用雷姆。
于 2021-05-23T11:11:04.580 回答