AtoZ CSS Quick Tip: Benefits of rem and em Values

Key Points

• Using relative units such as "em" to set text size and internal and external spacing of elements is more flexible than using pixels, especially in responsive projects. However, "em" units can cause problems with nested elements, causing them to grow or shrink exponentially at each nesting level.
• "rem" unit is a more reliable alternative to setting font size, as it is always calculated based on the font size of the root element. This avoids the exponential growth or shrinkage that occurs when using "em" units in nested elements.
• For browser support, especially for older versions of Internet Explorer, you can use JS polyfill or px alternatives. If using Sass, you can create a hybrid macro and function to calculate the required rem size and automatically provide a backup plan.

This article is part of our AtoZ CSS series. You can find other entries for the series here. You can view the full text and screenshots of their corresponding videos (videos about :required pseudo-classes) here.

Welcome to our AtoZ CSS series! In this series, I will explore different CSS values ​​(and properties), each starting with different letters in the alphabet. We know that sometimes screenshots are not enough, so in this article we have added some quick tips on using rem and em values.

R stands for rem and em

In the initial screenshot video, we learned about the :required pseudo-class, which can be used to style forms where fields must be filled.

Forms, verification, and style status are important topics, but we didn't miss much when we first discussed :required. So let's take a look at a few quick tips for using the rem unit of measurement. But first, let's look at another relative unit: em.

Pros and cons of using em

When working with responsive items, using relative units such as em to set text size and internal and external spacing of elements is more flexible than using pixels. This is because this unit allows the element's size, spacing, and text content to grow proportionally with the font size of the parent element relative to the font size of its parent element.

Use these relative units, you can build a scale system where changing the font size value of an element has a cascading effect on the child elements within it. The proportional system is a good thing, but this behavior of em does have disadvantages.

Consider the following HTML code snippet:

<code class="language-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></code>

This nested list is not the most common thing in the world, but it is likely to appear in terms and conditions pages or other types of official documents.

If we want the list item to stand out, we can set its font size to 1.5 times the 16px benchmark size.

<code class="language-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></code>

But this causes problems with nested lis, as they will also be 1.5 times the size of their parent elements. The nested items will be 1.5 times higher than 24px, rather than 1.5 times higher than 16px. The result is that any nested list item will grow exponentially at each nesting level. This may not be the result the designer wants!

Similar problems also occur when nested elements and em values ​​are less than 1. In this case, any nested items will be constantly decreasing at each nesting level.

So what should we do?

Use rem to set text size

To avoid the font size increasing or decreasing, we can use alternative units.

We can use pixels, but as mentioned earlier, relative units are more flexible in responsive projects. Instead, we can use rem units because this is always based on the font size of the root element, which in the case of a website or web application is usually an html element. In .svg or .xml documents, the root elements may be different, but these types of documents are outside our current scope.

If we use rem to set the font size, it does not mean that em will never be used. I tend to use em to set the padding inside the element so that the spacing is always relative to the text size.

Use Sass to help rem browser support

rem units are only supported from IE9 and later. If you need support for IE8 (or earlier), you can use JS polyfill or provide a px alternative as follows:

<code class="language-css">li {
  font-size: 1.5em; /* 24px/16px */
}</code>

If you use Sass, you can create a hybrid macro and a function to calculate the required rem size and automatically provide alternate solutions.

<code class="language-css">li {
  font-size: 24px;
  font-size: 1.5rem;
}</code>

That's it. Some quick tips on using rem. If you don't use them in your current project, I highly recommend you give it a try.

FAQ for REM and EM values ​​in CSS

What are the main differences between REM and EM in CSS?

The main difference between REM and EM in CSS is that they calculate the reference point of size. EM The font size relative to its nearest parent element or current element. This means that if you nest elements, each using EM to define the font size, the sizes will be compounded and can quickly become difficult to control. On the other hand, REM is relative to the root element (or html element). This means that no matter how deep the element is nested, if you define its font size using REM, it will reference the font size of the html element, giving a consistent size on your website.

When should I use REM instead of EM in CSS?

REM is usually used when you want to create consistent and predictable resizing across your website. Because REM is relative to the root element, the resizing will remain consistent no matter how deep your element is nested. This is especially useful for building responsive designs where consistency and predictability are critical. However, when you want to create a more dynamic and scalable design, you can use EM where the size of the element is relative to its parent.

How to convert pixels to REM or EM in CSS?

To convert pixels to REM or EM, you first need to know the reference font size of the document. This is usually set on the html element, usually 16px, but can be any value. Once the reference font size is known, the REM or EM value can be calculated by dividing the desired pixel value by the reference font size. For example, if your benchmark font size is 16px, and you want a font size of 24px, the calculation is 24 / 16 = 1.5rem or 1.5em.

Can REM and EM units be used interchangeably?

While both REM and EM units can be used to define sizes in CSS, they cannot be used interchangeably because of their different reference points. REM is always relative to the root element, while EM is relative to the nearest parent element or the current element. This means that the same REM or EM value may result in different sizes depending on the context it is used.

How does browser compatibility affect the use of REM and EM units?

REM and EM units are well supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, if you need to support older versions of Internet Explorer (IE 8 or earlier), you should be aware that these browsers do not support REM units. In this case, you may need to use a pixel backup plan or consider using an EM unit, which has wider browser support.

How do REM and EM units affect accessibility?

REM and EM units can greatly enhance the accessibility of your website by making it easier to scale and respond to user settings. Since these units are relative, they allow users to adjust the baseline font size according to their preferences without breaking the layout. This is especially beneficial for visually impaired users who may need to increase font size for greater readability.

What are the best practices for using REM and EM units?

A best practice is to use REM units to define font sizes, margins, and padding to ensure consistency across the website. You can use EM units for elements that need to be scaled with their parent elements, such as drop-down menus or tooltips. It is also a good idea to define the benchmark font size as a percentage on the html element, which allows users to adjust the benchmark font size according to their preferences.

How do REM and EM units work with media queries?

REM and EM units can be used in media queries like any other unit. However, because these units are relative, they can make your media queries more flexible and responsive. For example, if you define breakpoints using EM units, they will scale with the base font size, allowing your layout to adapt to user settings.

Can I use REM and EM units for elements other than text?

Yes, REM and EM units can be used for any size definition in CSS, not just text. This includes width, height, fill, margin, border width, and even positioning. Using REM and EM units for these properties can make your layout more flexible and responsive.

How to deal with nested elements when using EM units?

Nested elements can be a challenge when using EM units because the sizes will be compounded. One way to deal with this is to reset the font size of the nested element to 1em, which will make it equal to the font size of its parent element. Alternatively, you can use REM units for nested elements to ensure consistency in resizing.

The above is the detailed content of AtoZ CSS Quick Tip: Benefits of rem and em Values. For more information, please follow other related articles on the PHP Chinese website!