什么时候使用 Em 与 Rem

文章转自：http://www.w3cplus.com/css/when-to-use-em-vs-rem.html著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/when-to-use-em-vs-rem.html © w3cplus.com

 

你可能已经很熟练使用这两个灵活的单位，但你可能不彻底了解什么时候使用 rem ，什么时候使用 em。 本教程将帮你弄清楚!

em 和 rem都是相对单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 若是你使用值 1em 或 1rem，它能够被浏览器解析成 从16px到 160px 或其余任意值。

padding设置了1em

解析出来的值为16px

padding设置了1em

解析出来的值为160px

另外一方面，浏览器使用 px 值，因此 1px 将始终显示为彻底 1px。

滑动滑块试试这个 CodePen 例子，你能够看到rem 和 em 单位的值能够转化为不一样的像素值，而 px 单位保持固定大小:

最大问题

使用 em 和 rem 单位可让咱们的设计更加灵活，可以控制元素总体放大缩小，而不是固定大小。 咱们可使用这种灵活性，使咱们在开发期间，能更加快速灵活的调整，容许浏览器用户调整浏览器大小来达到最佳体验。

em 和 rem 单位提供的这种灵活性和工做方式都很类似，因此最大的问题是，咱们什么时候应使用 em 值，什么时候应使用 rem 值呢?

主要区别

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值 理解这种差别是决定什么时候使用哪一个单元的关键。

咱们要经过复习 rem 和 em 单位如何工做，来确保你知道每个细节。 而后我会讲到为何你应该使用 em 或 rem 的单位。

最后，咱们会看看到底哪些典型元素的设计，你应该在实际应用中使用哪一种类型的单位。

rem 单位如何转换为像素值

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。

例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

CSS设置padding为10rem

浏览器解析出来的值为160px

em 单位如何转换为像素值

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。

例如，若是一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。

CSS设置padding为10em

浏览器解析出来的值为180px(或接近它)

重点理解:

有一个比较广泛的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。

父元素的字体大小能够影响 em 值，但这种状况的发生，纯粹是由于继承。 让咱们看看为何以及如何起做用。

Em 单位的继承效果

使用 em 单位存在继承的时候，状况会变得比较棘手，由于每一个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖，好比px,vw。

使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。 所以，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

让咱们看看一个例子。 在下面的 CodePen单步执行试试。 随着你的前进，使用 Chrome 开发工具或 Firebug 为火狐浏览器来检查咱们的 em 单位计算到的像素值。

Em 继承的例子

若是咱们的根元素字体大小为 16px (一般是默认值) 一个子元素 div 里面padding值为 1.5em，该 div 将从根元素继承字体大小 16px。 所以padding会解析成 24px，即 1.5 x 16 = 24。

若是咱们加多一个div来包裹原先的div，而后设置其字体大小为 1.25em呢?

咱们包裹的 div 继承根元素字体大小 16px ，并乘以它本身的 1.25em 的字体大小。 这将设置包裹 div 字体大小为20px，即 1.25 x 16 = 20。

如今咱们原始的 div 再也不直接从根元素继承,而是从其新的父元素继承字体大小为 20px 1.5em 其padding值如今等于 30px，即 1.5 x 20 = 30。

这个继承效应能够更复杂，若是咱们向咱们原始的 div 添加 em 字体单位，比方说 1.2em。

div 从其父级继承 20px 字体大小，而后，乘以它本身的 1.2em 设置，给它 24px，即 1.2 × 20 = 24 新字体大小。

div上1.5em的 padding 如今将再次改变大小，用新的字体大小，36px，即 1.5 × 24 = 36 。

最后，为了进一步说明那个 em 单位是相对于他们最终得到(不是父元素)的字体大小，让咱们来看看设置padding: 1.5em 若是咱们显式设置 div 使用 14px值，不继承字体大小会发生什么。

如今，咱们的padding为 21px，即 1.5 x 14 = 21 已经变小了。 它不受父元素的字体大小。

因为存在着这些隐患，你能够看到为何必须知道如何正确管理使用 em 单位。

浏览器设置 HTML 元素字体大小的影响

默认状况下浏览器一般有字体大小 16px，但这能够被用户更改成从 9px 到 72px的任何值。

你须要知道的:

根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。

因此 html 元素的字体大小虽然是直接肯定 rem 值，但字体大小可能首先来自浏览器设置。

所以浏览器的字体大小设置能够影响每一个使用 rem 单元以及每一个经过 em 单位继承的值。

没有设置 HTML 字体大小时，浏览器设置起做用

除非重写，不然它将继承浏览器默认设置的字体大小。 例如，让咱们把网站的html元素没有设置font-size值。

若是用户让他们的浏览器默认字体大小为 16px，那么根元素字体大小将为 16px。 在 Chrome 开发工具下，你能够在已计算选项卡下看到一个元素继承的属性。

在这种状况下 10rem 等于 160px，即 10 x 16 = 160。

若是用户将其浏览器中的默认字体大小调为18px，根字体大小变成 18px。 如今 10rem 转换为 180px，即 10 × 18 = 180。

浏览器将调整使用 em 单位的 HTML 元素字体大小

当 em 单位设置在 html 元素上时，它将转换为em值乘以浏览器字体大小的设置。

例如，若是网站的 html 元素的字体大小属性设置为 1.25em，根元素字体大小将为 1.25 倍的浏览器的字体大小设置。

若是浏览器字体大小被设置为 16px，根字体大小会出来为 20px，即 1.25 x 16 = 20。

在这种状况下 10rem 将等于 200px，即 10 × 20 = 200。

因此，若是浏览器字体大小被设置为 20px，根元素字体大小会解析成 25px，即 1.25 × 20 = 25。

如今 10rem 将等于 250px，即 10 × 25 = 250。

总结 rem与 em 差别

上述全部归结以下:

• rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
• em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

为何使用 rem 单位:

rem 单位提供最伟大的力量并不只仅是他们提供一致尺寸而不是继承。 相反，它给咱们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，再也不是使用固定的 px 单位。

为此，使用 rem 单位的主要目的应该是确保不管用户如何设置本身的浏览器，咱们的布局都能调整到合适大小。

一个站点最初设计能够专一于最多见的默认浏览器中字体大小 16px。

使用浏览器默认字号16px

可是，经过使用 rem 单位，若是用户调整其字体大小，咱们也能保证布局的完整性，使用较小的文本避免文本空间被压扁了。

浏览器解析的字号为34px。

若是用户缩小其字体大小，整个布局掉下来，空白区域中的文本也不会想得很无力。

浏览器字体大小 9px

用户会由于各类各样的缘由更改字体大小设置。 容纳这些设置能够得到更好的用户体验。

重要的是:

一些设计师使用结合 rem 单位的方式给html元素设置了一个固定的px单位。 这是很广泛的作法，因此改变html元素的字体大小时，可使整个页面作相应调整

我强烈反对种作法，由于它重写继承了用户设置的浏览器字体大小。 更夸张的说，这剥削了用户自行调整以得到最佳视觉效果的能力。

若是您确实须要更改 html 元素的字体大小，那么就使用em，rem单位，这样根元素的值还会是用户浏览器字体大小的乘积。

这将容许您经过更改您的 html 元素的字体大小，调整你的设计，但仍会保留用户的浏览器设置的效果。

为何使用 em 单位

em 单位取决于一个font-size值而非 html 元素的字体大小。

为此，em 单位的主要目的应该是容许保持在一个特定的设计元素范围内的可扩展性。

例如，您可能使用em 值设置导航菜单项的padding、 margin，line-height等值。

带有0.9rem 字体大小的菜单

经过这种方式，若是您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放。

带有1.2rem 字体大小的菜单

前面一节中你看到em 单位如何变得不可收拾。 为此，我建议只在你标识清楚的状况下使用 em 单位。

实际应用

一些 Web 设计师之间存在辩论，我相信不一样的人有不一样的首选的方法，但个人建议是，以下所示。

使用 em 单位:

根据某个元素的字体大小作缩放而不是根元素的字体大小。

通常来讲，你须要使用 em 单位的惟一缘由是缩放没有默认字体大小的元素。

根据咱们上面的例子，设计组件好比按钮，菜单和标题可能会有本身明确的字体大小。 当你修改字体大小的时候，你但愿整个组件都适当缩放。

通用属性这一准则将适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。

我建议，当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。

一般不使用 em 单位控制字体大小

咱们常常会看到使用em做为字体大小单位，特别是标题，当我认为若是使用rem将更具可扩展性。

标题常用 em 单位的缘由是他们相比px单位，在相对常规文本大小方面更出色。 然而 rem 单位一样也能够实现这一目标。 若是 html 元素上任何字体大小调整，标题大小仍会缩放。

请尝试更改下面的 CodePen，看看 html 元素上的 em 字体大小如何起做用:

少部分状况下，咱们不想咱们的字体大小根据根元素作调整，只有几个例外的状况。

咱们能够想到的例子是一个使用 em 字体大小的下拉菜单，咱们有第二个级别的菜单项文本大小取决于第一级字体大小。 另外一个例子多是用在按钮里面的字体图标，字体图标的大小跟按钮的文本大小有关。

然而，大多数 Web 设计中的元素每每不会有这种类型的要求，因此通常使用 rem 单位的字体大小，em 单位只在特殊的状况下使用。

使用 rem 单位:

不须要 em 单位，而且根据浏览器的字体大小设置缩放的任何尺寸。

这几乎在一个标准的设计中占据了一切，包括height，width，padding，margin，border，font-size，shadows，几乎包括你布局的每部分。

简单地说，一切可扩展都应该使用 rem 单位。

小技巧

建立布局时，每每要以像素为单位更方便，但部署时应使用rem单位。

你可使用预处理好比Stylus / Sass / Less，来自动转换单位或PostCSS之类的插件。

或者，您可使用 PXtoEM 手动作您的转换。

始终使用 rem 单位作媒体查询

特别注意，当使用 rem 单位建立统一可扩展的设计，媒体查询也应该是rem单位。 这将确保，不管用户浏览器的字体大小，您的媒体查询会对它做出反应和调整您的布局。

例如，若是用户缩放文本很是高，您的布局可能须要从两列到单个列调整，由于它可能会在较小的移动设备上显示。

若是您的断点在固定的像素宽度，只有不一样的视口的大小能够触发它们。 可是基于 rem 的断点他们将响应不一样的字体大小。

不要使用 em 或 rem :

多列布局

布局中的列宽一般应该是 %，所以他们能够流畅适应没法预知大小的视区。

然而单一列通常仍然应使用 rem 值来设置最大宽度。

例如:

.container { width: 100%; max-width: 75rem; }

这保持列的灵活，可扩展。又能防止变得太宽了。

当元素应该是严格不可缩放的时候

在一个典型的 Web 设计的过程当中，不会有不少部分的你不能使用伸缩性设计的布局。 不过偶尔你会遇到真的须要使用显式的固定的值，以防止缩放的元素。

采用固定的尺寸值的前提应该是，若是被缩放的话，它的结构会被打碎。 这真的不常出现，因此你想拿出那些 px 单位以前，问问本身是否使用它们是绝对必要的。

总结

让咱们以一个快速符号点归纳咱们介绍的内容:

• rem 和 em 单位是由浏览器基于你的设计中的字体大小计算获得的像素值。
• em 单位基于使用他们的元素的字体大小。
• rem 单位基于 html 元素的字体大小。
• em 单位可能受任何继承的父元素字体大小影响
• rem 单位能够从浏览器字体设置中继承字体大小。
• 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
• 在不须要使用em单位，而且须要根据浏览器的字体大小设置缩放的状况下使用rem。
• 使用rem单位，除非你肯定你须要 em 单位，包括对字体大小。
• 媒体查询中使用 rem 单位
• 不要在多列布局中使用 em 或 rem ,改用%。
• 不要使用 em 或 rem，若是缩放会不可避免地致使要打破布局元素。

我但愿你如今已经创建了强健的、 完整的图片，到底 em 和 rem 的单位如何工做，并经过，知道如何最好地利用他们在你的设计中。

我鼓励您尝试为你本身使用本教程指南，它们会为您建立彻底成熟的可伸缩性和响应性布局。

著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/when-to-use-em-vs-rem.html © w3cplus.com