[Basic] EM or REM? this is a problem!

Briefly

Using relative length units like andEM for page layout is a best practice in web development. It is better to use and REMin page layout to scale the size of display elements according to the device size. This makes it possible for components to display optimally on different devices.EMREM

But the question is whether to use EMor REMnot? There has been considerable controversy on this issue. This article will introduce to you what EMis REMand how to choose between them, and how to combine the advantages of both to build modular WEB components.

Note: The content of this article is simple, only for junior developers, about 2500 words, and the reading time is 5 minutes.

1 What is EM?

emis a relative unit of length. It is relative to the current element font size, ie font-size. For example, if the font of the current element is 20px, then 1em in the current element is equal to 20px.

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

emIn actual development, it is a best practice in web development to use relative length units (eg ) to express font size.

Consider the following code:

h1 { font-size: 2em }

What is the font size of the h1 element here?

At this time, we need <h1>to calculate <h1>the size of the font according to the size of the font of the parent element. If the parent element is <html>, and <html>the font-size is 16px. The font size that can be calculated <h1>is 32px, which is 2*16px.

Expressed in code as follows:

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

Setting <html>the font size is generally not a good idea because it overrides the user's browser default settings. Instead, use a percentage value or not declare the <html>font size at all.

html { font-size: 100% } /* 缺省 16px */

For most users or browsers, the default font size is 16px (the browser default font size is not set).

emIt can also be used to specify other properties besides font size, like marginor paddingother properties can be emused to represent.

Consider the code below, what should the value be for the <h1>sum <p>element margin-bottom? (Assumed <html>font size is set to 100%).

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

The margin-bottom of the above <h1>sum <p>is 1em, but the resulting value of the margin is not the same. The above phenomenon occurs because it emis relative to the font size of the current element. Since <h1>the font size in is now set to 2em, <h1>the 1em value for the other properties in is 1em = 32px. Here's where it's easy to get misunderstood.

2 What is REM?

remRepresents root em, which is a unit of length relative to the root element. Here the root element is <html>the font size defined in . This means that 1rem anywhere is always equal <html>to the font size defined in .

Using the same code above, what exactly is the calculated value remwe emlook at instead of margin-bottom?

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

As shown in the code above, 1rem is always equal to 16px (unless the <html>font size is changed). remCompared with the size of em, the meaning is more direct and clear, and it is easy to understand.

3 REM or EM?

Whether to choose remor emhas been controversial. Some developers don't use remit because it remmakes the components less modular. While other developers prefer remthe simplicity, use remhandles all elements.

In fact, emand remboth have their own advantages and disadvantages. In actual project development, both should be used in combination to make use of their respective advantages to achieve better code quality and display effects.

So how to choose between the two in specific applications? There are two simple guiding principles:

If the attribute size is to be scaled according to the element font, useem
Use in all other casesrem

The above rules are too simplistic. In order to better understand the above rules, we will take a simple header component as an example to illustrate the problems encountered by using the two components alone to realize the components, and realize the advantages of using the two components in combination.

3.1 Use REM only

Here we only use remto write a header component, the code and running results are as follows:

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}

Use rem to implement header test Figure 1

Next, the website needs a larger header component.

Change the CSS code as follows:

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
}

The results are as follows:

Use rem to implement header test Figure 2

It can be seen from the above operation results that the inner margin ( padding) of the text is too small, and the display effect is inconsistent. If we insist on using only rem, we can only change the css code as follows:

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
  padding: 1rem 1.5rem;
}

The result after the change is as follows:

Use rem to implement header test Figure 3

Although the above code and running results achieve the expected display effect, they violate the principle of code reuse. If the website has multiple sizes of .header styles, it is necessary to repeat the definition of the padding multiple times. Duplicate code increases project complexity and reduces maintainability.

At this time, you can use emthe above code to change as follows:

.header {
  font-size: 1rem;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
}

Please see the demo program for the running result:

demo code

As shown in the demo program above, when the size of the element attribute value needs to be scaled according to the element font size, it should be used emto define the attribute size. This is the first of the preceding rules.

3.2 Using EM only

What would be the result if only emthe above components were defined using ?

We change the above code as follows ( emreplace rem):

.header {
  font-size: 1em;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2em;
}

To get closer to reality, we introduced the <p>element and changed the htmlcode as follows:

<div class="header header-large">名人名言</div>
<p>简单是稳定的前提</p>
<div class="header">名人名言</div>
<p>简单是稳定的前提</p>

Add the css code of the p element as follows:

p {
    padding: 0.5em 0.75em;
}

The results are as follows:

Use em to implement header test Figure 1

From the above running results, it is not difficult to see that .header-largesome of the titles are not aligned to the left of the text. And if you only use emleft alignment, you need to change the CSS code as follows:

.header {
  font-size: 1em;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2em;
  padding-left: 0.375em;
  padding-right: 0.375em;
}

The result after the change is as follows:

Use em to implement header test Figure 2

Although the above code and running results achieve the expected display effect, they violate the principle of code reuse. If the website has multiple sizes of .header styles, it is necessary to repeatedly define the left and right margins. Duplicate code increases project complexity and reduces maintainability.

The solution to the above problem is to use a combination of emand rem, that is, use to emdefine the top and bottom margins, and use to remdefine the left and right margins. The changed code is as follows:

.header {
  padding: 0.5em 0.75rem;
  font-size: 1em;
  background: #7F7CFF;
}

.header-large {
  font-size: 2em;
}

Please see the demo program for the running result:

demo code

3.3 EM or REM summary

Should it be used emor remwhat? The answer should be to use a combination of remand rem. When the size of the attribute value needs to be scaled according to the font size of the current element, it is selected em, and the simpler one is used in other cases rem.

4 Setting of em and rem values

emand remattribute values are converted into absolute length units by calculation. Commonly used font sizes can be difficult to express in relative length units. See the following representation of common font values rem(the base font size is 16px):

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

As shown in the above list, the representation and calculation of the above dimension values are not inconvenient. In order to solve the above problems, a little trick is used, namely the famous "62.5%" technique. Please see the following code for details:

body { font-size:62.5%; }  /* =10px */
h1   { font-size: 2.4em; } /* =24px */
p    { font-size: 1.4em; } /* =14px */

With a setting of 62.5%, it can be easily emused to define the size of specific attributes (10 times the relationship).

Instead rem, you need to do the following:

html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

5 Responsive Examples

A simple responsive example, adjust the browser width to see the demo.

demo code

6 References

7 Description

Parts of the text and code described in this article are compiled from the Internet. Due to lack of time, limited ability and other reasons, there are many problems such as inaccurate text description and insufficient code testing. Therefore, it is limited to the scope of learning and is not suitable for practical applications. Also there emare remcompatibility issues in older browsers.