Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

New technologies are inevitably created to solve the problems and inconveniences of older technologies. This article will explain in detail the problems that EM and REM solve, and show you the correct actions to use REM in a step-by-step manner.

Px em REM

  • Px is a fixed pixel, relative to the screen resolution of the monitor, and once set cannot be changed to fit the page size.

In order to solve the px problem, em was proposed. This is the font size relative to the text in the current object. If the font size is not set for the text in the line, the browser default font size is used, which is usually 16px.

However, EM is still a bit of an inconvenience, and complex nesting logic makes changing some elements have a knock-on effect of changing font sizes.

Rem is CSS3’s new relative unit, root EM, as opposed to the root element (HTML). Rem’s base root makes the calculation clearer.

  • Em and REM are more flexible than PX. They are units of relative length, meaning that length is not fixed, and are more suitable for responsive layouts and scenarios such as mobile. Both EM and REM are converted to pixel values by the browser, depending on the font size Settings in your design.

The difference between EM and REM units is based on who the browser converts to px values, and understanding this difference is key to deciding when and which units to use.

We will understand the difference between EM and REM by reviewing how rem and EM units work.

How are EM units converted to pixel values

When using EM units, the pixel value will be the EM value multiplied by the font size of the element using EM units, which are converted to pixel size depending on the font size applied to the current element.

For example, if a div has an 18px font size, 10em will be the same as 180px, or 10 × 18 = 180.

CSS padding is set to 10em

Calculate 180px (or close to it)

How are REM units converted to pixel values

When rem units are used, they convert to pixel sizes depending on the font size of the root page element, that is, the HTML element. The font size of the root element times your REM value.

For example, if the font size of the root element is 16px, 10rem would be 160px, which is 10 x 16 = 160.

CSS padding is set to 10REM

The result is 160px

The key to understand

A common misconception is that the EM unit is the font size relative to the parent element. In fact, according to the W3 standard, they are font sizes relative to elements that use EM units.

The font size of the parent element can affect the EM value, but this happens purely because of inheritance. Let’s look at why and how it works.

Genetic effects of EM units

When using EM units with inheritance, things can get tricky because each element automatically inherits its parent element’s font size. Inheritance effects can only be overridden by explicit font units, such as px,vw

The font size of elements using EM units depends on them. But that element may inherit the font size of its parent, which in turn inherits the font size of its parent, and so on. Therefore, the font size of an element in em may be affected by the font size of any of its parent elements.

Let’s look at the advantages of REM

What is the difference between rem and EM? The difference is that when REM is used to set the font size for the element, the font size is still relative, but relative only to the HTML root element. This unit combines the best of both relative and absolute size, allowing you to scale all font sizes by changing only the root element, while avoiding the cascading effect of font sizes being compounded layer by layer.

Reference:

  • Caibaojian.com/rem-vs-em.h…
  • www.runoob.com/w3cnote/px-…
  • Caibaojian.com/rem-vs-em.h…
  • Webdesign.tutsplus.com/zh-hans/tut…
  • Blog.csdn.net/qq_37149252…
  • www.runoob.com/cssref/css-…