在 CSS 中 rem 与 em 有何不同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13941275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does rem differ from em in CSS?
提问by Mr. Alien
In website source, I have sometimes seen developers use the remunit. Is it similar to em? I tried it to see what it actually does, but what is it relative to?
在网站源代码中，我有时会看到开发人员使用该rem单元。它类似于em? 我试着看看它实际上做了什么，但它与什么有关？
HTML
HTML
<div>Hello <p>World</p></div>
CSS
CSS
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}
回答by Diodeus - James MacFarlane
EMs are relative to their parent's font size
EMs 是相对于其父字体大小的
REMs are relative to a base font-size
REMs 相对于基本字体大小
This is important when intermediate containers change font sizes. Child elements with EMs will be affected, those using REMs will not.
这在中间容器更改字体大小时很重要。带有 EM 的子元素会受到影响，使用 REM 的子元素不会。
回答by Jukka K. Korpela
The unit rem(root em) stands for the font size of the root element. In an HTML document, the root element is the htmlelement. Browser support is still limited.
单位rem（root em）代表根元素的字体大小。在 HTML 文档中，根元素是html元素。浏览器支持仍然有限。
回答by Jayesh Panchal
While emis relative to the font-size of its direct or nearest parent, remis only relative to the html (root) font-size.
虽然em与其直接或最近的父级的字体大小有关，但rem仅与 html（根）字体大小有关。
emgives the ability to control an area of a design. As in, scale the type in that specific area relatively. remgives the ability to scale type across the entire page easily.
em提供了控制设计区域的能力。如在，相对地缩放该特定区域中的类型。 rem能够轻松地在整个页面上缩放字体。
回答by Shaun Luttin
Here is an example. divssized with remchange as we change the font-sizeof the htmlelement. Whereas those sized with emonly change as we change the font-sizeof the div.
这是一个例子。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>回答by Alireza
Basically emis relative to the nearest parent in CSS, while is remis relative to the parent of the page which is usually the html tag...
基本上em是相对于 CSS 中最近的父级的，而rem是相对于页面的父级的，通常是 html 标签......
You see the difference clearly if you run the css below and how the parent is effecting it:
如果您运行下面的 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>回答by Willem van der Veen
Summary:
概括：
rem: aCSSunit which is relative to the font size of thehtmlelement.em: aCSSunit which is relative to the font size of the parentelement.
rem:CSS相对于html元素字体大小的单位。em: 一个CSS相对于父元素字体大小的单位。
Example:
例子：
.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>In the above example the green square is 160px by 160 px (unless you don't have browser default at 16px). This is because the browser default of the htmlelement font-sizeis 16pxand 10rem* 16px= 160.
在上面的例子中，绿色方块是 160 像素 x 160 像素（除非你没有浏览器默认值16px）。这是因为该html元素的浏览器默认值font-size是16pxand 10rem* 16px= 160。
The inside square is 10embig. Because its parent element is 5pxthe square is 5em * 10px= 50px.
里面的广场10em很大。因为它的父元素是5px正方形是 5em * 10px= 50px。
How is this usefull:
这有什么用：
By setting all units to remhave the following advantages:
通过设置所有单位rem具有以下优点：
- We can scale our whole application with one CSS media query, in this media query we can specify the font size. By altering the font size all the elements which have the unit
remwill scale accordingly. - When users are not using the default browser font-size of
16pxour application will scale with the selected font size of the user.
- 我们可以使用一个 CSS 媒体查询来扩展我们的整个应用程序，在这个媒体查询中我们可以指定字体大小。通过改变字体大小，所有具有单位的元素
rem将相应地缩放。 - 当用户不使用默认浏览器字体大小时，
16px我们的应用程序将根据用户选择的字体大小进行缩放。
回答by Sashini Hettiarachchi
rem , em and px are different units of font-size in css.
rem ， em 和 px 是css中不同的字体大小单位。
emAn em is equal to the computed font-size of that element's parent. ex: div element defined with font-size: 16px, its children 1em = 16px.
emem 等于该元素的父元素的计算字体大小。例如：用字体大小定义的 div 元素：16px，其子元素 1em = 16px。
remrem values are relative to the root html element. ex: If font-size of the root element is 16px,1 rem = 16px for all elements.
remrem 值相对于根 html 元素。例如：如果根元素的字体大小为 16px，则所有元素的 1 rem = 16px。
Reference: https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97
参考：https: //medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97
回答by Serhii
https://stackoverflow.com/a/13941345/9093112- it's a best answerm but I only want to add
https://stackoverflow.com/a/13941345/9093112- 这是最好的答案，但我只想补充
Default browser size is 16px = 1em = 1 rem
