The use of PX, EM and rem in CSS

Believe that every front-end engineers have such an experience, the domestic designers like to use PX, and the foreign sites mostly like with Em and REM, then what are the differences between the three, and what are the pros and cons of each? The following article is a small series to give you a detailed introduction of the CSS in the PX, EM and REM differences, the need for friends can refer to the following to see together.

Objective

Both EM and REM are flexible and extensible units, converted by the browser to pixel values, depending on the font size in the design, and if the value is 1em or 1rem, it can be converted from 16px to 160px or any other value by the browser. The browser uses 1px, then 1px is always displayed as full 1px.

The same point of EM and REM

Using EM and REM units allows us to design more flexibly and to control the overall enlargement of the elements rather than the fixed size

EM and REM differences

The difference is that the browser converts the PX value according to WHO

How REM units are converted to pixel values

When using REM units, they convert to pixel size depending on the font size of the page root element, which is the font size of the HTML element. The root element font size is multiplied by your REM value.

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

How EM units are 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. For example, if a P has a 18px font size, 10em will be equivalent to 180px, which is 10x18 = 180.

Focus on understanding:

There is a more general misconception that the EM units are relative to the parent element's font size. In fact, according to the W3 standard, they are relative to the font size of elements using EM units. The font size of the parent element can affect the EM value, but this happens purely because of inheritance. Let's see why and how it works.

What you need to know:

The root HTML element inherits the font size set in the browser unless you explicitly set a fixed value to overwrite it. The font size of the HTML element, though, is directly determined by the REM value, but the font size may come first from the browser settings. Therefore, the font size setting of the browser can affect each value that uses REM cells and each inherited by EM units.

Summary with REM difference em

All of the above are summed up as follows:

1. The REM unit translates to a pixel value that is determined by the font size of the HTML element. This font size is affected by the font size setting in the browser, unless you explicitly override a specific unit.

2. The EM units are converted to pixel values, depending on the font size they use. This font size is affected by the font size inherited from the parent element, unless explicitly overridden with a specific unit.

Why use REM units:

Rem units provide the greatest power not only for them to provide uniform dimensions but not inheritance. Instead, it gives us a way to get the user's preferences to affect the size of each element in the site that uses REM, no longer using a fixed PX unit.
For this reason, the main purpose of using REM units should be to ensure that regardless of how users set up their own browsers, our layouts can be sized to fit.

Why Use EM units

EM units depend on a font-size value rather than the font size of the HTML element.

For this reason, the primary purpose of the EM unit should be to allow scalability to be maintained within a particular design element range.

For example, you might use the EM value to set the padding, margin,line-height equivalents of the navigation menu item. Menu with 0.9rem font size

In this way, if you change the font size of the menu, the spacing around the menu item is scaled proportionally in the remaining space.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How CSS handles the browser's default style

CSS implementation with arrow process visible progress bar