AtoZ CSS快速提示：rem和em值的好处

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for its corresponding video about the :required pseudo class here.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 您可以在此处查看有关:required伪类的完整视频以及其相应视频的截屏视频。

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips about using the rem and em values.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道有时播客还不够，因此在本文中，我们添加了有关使用rem和em值的快速提示。

R是rem和em (R is for rem and em)

In the original screencast video we learned all about the :required pseudo class which is useful for styling forms with fields that must be filled in.

在原始的截屏视频中，我们了解了:required伪类的全部知识， 该伪类对于样式化必须填写的字段很有用。

As much as forms, validation, and styling state are big topics, there isn’t too much we didn’t cover on the topic of :required the first time around. So instead, let’s look at a couple of quick tips for using the rem unit of measurement. But first, let’s look at another type of relative unit: the em.

尽管表单，验证和样式状态是大话题，但在第一次围绕:required的话题上，我们没有涉及太多。 因此，让我们来看一些使用rem度量单位的快速提示。 但首先，让我们看看另一种相对单位： em 。

使用em利弊 (The Pros and Cons of using em)

When working on a responsive project it’s more flexible to use relative units like em for sizing text and spacing in and around elements rather than pixels. This is because this unit is relative to the font size of its parent element, allowing an element’s size, spacing and text content to grow proportionally as the font-size of parent elements change.

在进行响应式项目时，使用诸如em类的相对单位来灵活调整元素和元素内外的文本大小和间距，而不是像素。 这是因为此单位是相对于其父元素的字体大小的，从而允许元素的大小，间距和文本内容随父元素的font-size的变化而按比例增长。

Using these relative units enables you to build a system of proportions where changing values of font-size on one element has a cascading effect on the child elements within. A system of proportions is a good thing, but this behavior of em does come with a downside.

使用这些相对单位可以使您构建比例系统，其中更改一个元素上的font-size值会对其中的子元素具有级联效果。 比例系统是件好事，但是em这种行为确实有不利之处。

Take the following snippet of HTML:

请使用以下HTML代码段：

<ul> 
  <li>lorem ipsum</li> 
  <li>dolor sit 
   <ol> 
    <li>lorem ipsum</li> 
    <li>lorem ipsum</li> 
    <li>lorem ipsum</li> 
    <li>lorem ipsum</li> 
   </ol> 
 </li> 
</ul>

This nested list isn’t the most common thing in the world but could likely appear in a page of terms and conditions or some other kind of formal document.

此嵌套列表并不是世界上最常见的列表，但可能会出现在条款和条件页面或某种其他形式的正式文档中。

If we wanted to make the list items stand out, we could set their font-size to be 1.5 times the size of the base size of 16px.

如果我们想使列表项脱颖而出，可以将其font-size设置为16px基本尺寸的1.5倍。

li {
  font-size: 1.5em; /* 24px/16px */
}

But this will cause an issue with the nested li as they will be 1.5 times the size of their parent too. The nested items will be 1.5 times 24px rather than 1.5 times 16px. The result is that any nested list items will grow exponentially with each level of nesting. This is likely not what the designer intended!

但这将导致嵌套li的问题，因为它们的大小也是其父级大小的1.5倍。 嵌套项将是1.5 24px而不是1.5 16px 。 结果是，任何嵌套的列表项都会随着嵌套的每个级别呈指数增长。 这可能不是设计师想要的！

A similar problem occurs with nested elements and em values of less than 1. In this case, any nested items would keep getting incrementally smaller with each level of nesting.

嵌套元素的em值小于1时，也会发生类似的问题。在这种情况下，任何嵌套项目在每个嵌套级别都将越来越小。

So what can we do instead?

那我们该怎么办呢？

使用rem设置文本大小 (Use rem for setting text size)

Instead of running the risk of ever-increasing or decreasing font-size we can use an alternative unit.

不用冒着font-size不断增加或减小的风险，我们可以使用替代单位。

We could use pixels but relative units are more flexible in responsive projects as mentioned earlier. Instead, we can use the rem unit as this is always calculated based on the font-size of the root element which is normally the html element in the case of a website or web application. In a .svg or .xml document the root element might be different but those types of documents aren’t our concern here.

我们可以使用像素，但是相对单元在响应项目中更加灵活，如前所述。 相反，我们可以使用rem单位，因为它始终根据根元素的font-size来计算，在网站或Web应用程序的情况下，通常是html元素。 在.svg或.xml文档中，根元素可能有所不同，但是这些类型的文档不在这里。

If we use rem for setting font-size it doesn’t mean the humble em should never get a look in. I tend to use em for setting padding within elements so that the spacing is always relative to the size of the text.

如果我们使用rem设置font-size那并不意味着不起眼的em永远都不会出现。我倾向于使用em来设置元素内的padding ，以便间距始终与文本的大小有关。

使用Sass帮助提供rem浏览器支持 (Use Sass to help with rem browser support)

The rem unit is only supported from IE9 and above. If you need to support IE8 (or below) then you can use a JS polyfill or provide a px fallback in the following way:

仅IE9及更高版本支持rem单元。 如果您需要支持IE8(或更低版本)，则可以使用JS polyfill或通过以下方式提供px后备：

li {
  font-size: 24px;
  font-size: 1.5rem;
}

If you’re using Sass you could create a mixin and a function for calculating the desired size in rem and providing the fallback automatically.

如果您使用的是Sass，则可以创建一个mixin和一个用于在rem计算所需大小并自动提供后备功能的函数。

@function rem-calc($font-size, $base-font-size: 16) {
  @return ($size/$base-font-size) *1rem;
}
@mixin rem-with-px-fallback($size, $property:font-size) {
  #{$property}: $size * 1px;
  #{$property}: rem-calc($size);
}
li {
  @include rem-with-px-fallback(24);
}

There you have it. A couple of quick tips for using rem. If you’re not using them in your current projects, I’d definitely recommend giving them a try.

你有它。 使用rem一些快速技巧。 如果您不在当前项目中使用它们，则绝对建议您尝试一下。

翻译自: https://www.sitepoint.com/atoz-css-quick-tip-rem-em-values/