网页字体排版的最佳实践之一就是使用相对单位,如rem和em.
问题是,你应该使用哪一个呢?一直以来,rem支持者和em支持者之间都存在着争辩,认为应该使用自己支持的那个。
在这篇文章中,你会找到我如何在rem和em之间做抉择.你也将了解rem和em到底是什么以及如何使用它们来构建模块化组件。
什么是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的其它属性值。margin和padding属性也经常用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-bottom的1em值不同?
这种现象的发生在于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计算的便捷,但是讨厌他是我模块化组件的阻碍。
事实证明。rem 和 em 均有各自的优缺点。应给根据实际情况来判断其使用方式。
这里我有两个简单的规则:
- 如果这个属性根据它的font-size进行测量,则使用em(当有属性需要用它的字体大小(font-size)进行大小声明时,这时em就相当有用。)
- 其他的一切事物均使用rem.
有一个比较普遍的误解,认为 em 单位是相对于父元素的字体大小。 事实上,根据W3标准 ,它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响 em
(默认情况下浏览器通常有字体大小 16px,但这可以被用户更改为从 9px 到 72px的任何值。)
-根 html 元素将继承浏览器中设置的字体大小,除非显式设置固定值去覆盖。
- 所以 html 元素的字体大小虽然是直接确定 rem 值,但字体大小可能首先来自浏览器设置。
- 因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值。
- rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位。
- em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。
- rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
- em 单位基于使用他们的元素的字体大小。
- rem 单位基于 html 元素的字体大小。
- em 单位可能受任何继承的父元素字体大小影响
- rem 单位可以从浏览器字体设置中继承字体大小。
- 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
- 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
- 使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
- 媒体查询中使用 rem 单位
- 不要在多列布局中使用 em 或 rem ,改用%。
- 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。
- 更多区别及配合使用请看原文实例。
网友评论