REM vs EM

网页字体排版的最佳实践之一就是使用相对单位,如remem.

问题是,你应该使用哪一个呢?一直以来,rem支持者和em支持者之间都存在着争辩,认为应该使用自己支持的那个。

在这篇文章中,你会找到我如何在remem之间做抉择.你也将了解remem到底是什么以及如何使用它们来构建模块化组件。

什么是EM?

EM 是字体排印的一个单位,等同于当前指定的point-size。-维基百科

此语句在网页上并不能说得过去,因为我们不使用point-size.如果我们用point-size取代font-size的话,这句话就完全行得通。

意思就是,如果存在一个选择器的font-size属性的值为 20px,那么1em=20px

h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

em单位可以被用来声明字体的大小。实际上,最佳做法是使用相对单位,如用em指定font-size

考虑如下代码:

h1 { font-size: 2em }

这里h1选择器的真正大小是多少呢?

我们要根据<h1>的父元素来计算font-size。它的父元素是<html>,并且它的font-size被设置为16px

通过这种方式,我们可以计算出h1的值为32px,或者说2 * 16px.

html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */

虽然也可以实现,但是这并不被认为是一个好主意,通过在<html>中设置font-size的像素值将影响用户浏览器所设置的值。

取而代之,你可以使用percentage值,或者完全摒弃font-size

注意:如果你完全摒弃font-size,它的值将被默认为100%.

html { font-size: 100% } /*这里的意思是默认值为16px*/

对于大多数的用户(和浏览器),font-size的值为100%,就会默认为16px,除非用户通过浏览器设置来改变font-size的默认值。但是很少有人这么做。

好了,让我们回到em

em也可以用来指定除了font-size的其它属性值。marginpadding属性也经常用em设置大小。

这里是很多人开始对em的值产生困惑的地方。

考虑下面的代码。<h1><p>元素的margin-bottom的值应该是多少?(假设<html>font-size被设置为100%).

h1 {
  font-size: 2em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 32px */
}

p {
  font-size: 1em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 16px */
}

你是不是很吃惊两种状况下的margin-bottom1em值不同?

这种现象的发生在于1em等同于它当前的font-size。因为<h1>中的font-size被设置为了2em。其他用在<h1>内的em来计算的属性,就为1em = 32px

在不同的代码中,1em就会有不同的取值,这就是经常迷惑人们的地方。如果你也是刚刚接触em,你也会产生迷惑。

不管怎么说,这就是em.接下来,让我们认识rem

什么是REM?

rem指根em它的产生是为了帮助人们解决em所带来的计算问题。

它是字体排版的一个单位,等同于根font-size。这意味着1rem等同于<html>中的font-size

考虑相同的用rem表示的代码。现在margin-bottom计算出来的值为多少呢?

h1 {
  font-size: 2rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

p {
  font-size: 1rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

正如您看到的,无论您在哪里设置它,1rem的取值均为16px

这是十分可靠的,很容易去理解。

这就是rem。一旦你知道了什么是em,就很容易去理解,你是不是也同意这个观点?

现在让我们步入这篇文章的正题,rem 还是 em?

REMs or EMs?

这是极具争议的问题。

一些开发人员完全避免使用rem,声称使用rem会使他们的组件缺少模块化。另外一些人则什么都使用rem,因为喜欢rem所带来的便捷。

奇怪的是,在我的职业生涯中,我掉进了在不同的地方是使用rem或者em的陷阱中。我喜欢em帮助我完成模块化组件,但是讨厌它所带来的代码复杂性。我喜欢rem计算的便捷,但是讨厌他是我模块化组件的阻碍。

事实证明。remem

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/rem-vs-em.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部