Jane said

Using relative length units such as EM and REM for page layout is a best practice in WEB development. Use EM and REM in page layout to scale display elements according to device size. This makes it possible for components to display optimally on different devices.

But the question is whether to use EM or REM? There has been a great debate on this issue. This article will show you exactly what EM and REM are, how to choose between them, and how to combine the advantages of both to build modular WEB components.

Note: This article is simple and only for beginning developers. It is about 2500 words and takes 5 minutes to read.

1 What is EM?

Em is a unit of relative length. It is relative to the current element font size, that is, 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 */
Copy the code

In real development, using relative units of length (such as EM) to represent font sizes is a best practice in WEB development.

Consider the following code:

h1 { font-size: 2em } 
Copy the code

What is the font size of the H1 element?

In this case, we need to calculate the size of the

font based on the font size of the < H1 > parent element. If the parent element is < HTML > and the font size of < HTML > is 16px. You can calculate the font size for

to be 32px, or 2 by 16px.

Expressed in code as follows:

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

Setting the size of the < HTML > font is generally not a good idea because it overrides the default Settings of the user’s browser. Instead, you can use percentage values or not declare the < HTML > font size at all.

html { font-size: 100% } /* Defaults to 16px */
Copy the code

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

Em can also be used to specify properties other than font size, such as margin or padding.

Consider the following code: what should the margin-bottom value be for

and

elements? (Assuming the font size of < HTML > 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 */
}
Copy the code

The < h1 > and < p > margin – bottom is 1 em, but the outside of the resulting value is not the same. This occurs because em is relative to the font size of the current element. Since the font size in

is now set to 2em, the 1em value for the other attributes in

is 1em = 32px. Here’s a bit of a misunderstanding.

2 What is REM?

Rem stands for root EM, which is a unit of length relative to the root element. Here the root element is the font size defined in < HTML >. This means that 1rem anywhere is always equal to the font size defined in < HTML >.

Using the same code as above, we use REM instead of EM to see what the calculated value of margin-bottom is.

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

As shown in the code above, 1rem is always equal to 16px (unless you change the size of the < HTML > font). The size of REM is more straightforward and easy to understand than that of EM.

REM or EM?

Whether to choose REM or EM in project development has always been controversial. Some developers do not use REM because REM makes components less modular. Other developers like the simplicity of REM and use REM for all elements.

In fact, BOTH EM and REM have their own advantages and disadvantages. In actual project development, they should be combined to achieve better code quality and display effect.

So how do you choose between the two in a specific application? There are two simple guidelines:

  • If the attribute size is to be scaled according to the element fontem
  • In all other casesrem

The above rules are too simple. To better understand the above rules, let’s use a simple header component as an example to illustrate the problems of implementing both components separately and to see the benefits of using both together.

3.1 Use REM only

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

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

Next, the site needs a larger header component.

Change the CSS code as follows:

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

The running results are as follows:

It can be seen from the above running results that the padding of the text is too small and the display effect is not coordinated. If we insist on using rem only, we can only change the CSS code as follows:

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

The running result after the change is as follows:

Although the above code and running results achieve the desired display effect, but it violates the principle of code reuse. If your site has more than one size. Header style, repeat the inner margin several times. Repetitive code increases project complexity and reduces maintainability.

Using EM, you can change the above code as follows:

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

Please check the demo program for running results:

Demo code

As shown in the demo above, when the size of an element attribute value needs to be scaled according to the element font size, you should apply EM to define the attribute size. This is the first rule of the preceding rule.

3.2 Using EM Only

What if only EM were used to define the above components?

We changed the above code as follows (EM instead of REM) :

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

To be more realistic, we introduced the

element and changed the HTML code as follows:

<div class="header header-large">Quotes.</div>
<p>Simplicity is a prerequisite for stability</p>
<div class="header">Quotes.</div>
<p>Simplicity is a prerequisite for stability</p>
Copy the code

Add p element CSS as follows:

p {
    padding: 0.5 em 0.75 em;
}
Copy the code

The running results are as follows:

As you can see from the above operation, the header of the. Header-large section is not left aligned with the text. If only EM is used for left alignment, the CSS code needs to be changed as follows:

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

The running result after the change is as follows:

Although the above code and running results achieve the desired display effect, but it violates the principle of code reuse. If the site has more than one size. Header style, define the left and right margins multiple times. Repetitive code increases project complexity and reduces maintainability.

The solution is to use EM and REM together, that is, EM defines top and bottom margins, and REM defines left and right margins. The changed code is as follows:

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

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

Please check the demo program for running results:

Demo code

3.3 EM or REM summary

Should I use EM or REM? The answer should be a combination of REM and REM. Em is used when the size of the attribute value needs to be scaled according to the current element font size, and the simpler REM is used in all other cases.

4 Setting em and REM values

Both EM and REM property values are computed and converted to absolute length units. Common font sizes can be difficult to express in units of relative length. Look at the following REM representation of commonly used font values (base font size is 16px) :

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

As shown in the above list, the above dimensional values are expressed and calculated without any inconvenience. To solve this problem, there is a little trick known as the 62.5% technique. Please check the following code for details:

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

With 62.5%, it is easy to use EM to define the size of specific attributes (10 times the relationship).

In REM, the following methods are used:

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

5 Response example

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

Demo code

6 Reference Materials

  1. W3C:CSS Values and Units Module Level 3
  2. Zellwk :REM vs EM — The Great Debate
  3. sitepoint:Understanding and Using rem Units in CSS
  4. tutsplus:Comprehensive Guide: When to Use Em vs. Rem
  5. css-tricks:Confused About REM and EM?

7 shows

The text and code parts are compiled on the network. Due to the 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 not applicable to practical application. In addition, THERE are compatibility issues between EM and REM in older browsers.