Detailed explanation of the use of px, em and rem in css

I believe every front-end engineer has this experience. Most domestic designers like to use px, while most foreign websites like to use em and rem. So what is the difference between the three, and what are the advantages and disadvantages of each? ? In the following article, the editor will give you a detailed introduction to the differences between px, em and rem in css. Friends in need can refer to it. Let's take a look together.

Preface

em and rem are flexible and scalable units, converted to pixel values ​​by the browser, depending on the font size in the design, if using the value 1em Or 1rem, which can be converted by the browser from 16px to 160px or any other value. Browsers use 1px , so 1px is always displayed as exactly 1px.

The similarities between em and rem

Using em and rem units can make our design more flexible and control the overall enlargement and reduction of elements instead of fixed sizes

The difference between em and rem

The difference is who the browser converts into px value

How the rem unit is converted into pixel value

When using rem units, their conversion to pixel size depends on the font size of the page root element, that 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 is 16px, 10rem will be equivalent to 160px, that is, 10 x 16 = 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 font size of 18px, 10em will be equivalent to 180px, which is 10 × 18 = 180.

Key understanding:

There is a common misunderstanding that the em unit is the font size relative to the parent element. In fact, according to the W3 standard, they are relative to the font size of the element using em units. The font size of the parent element can affect em values, but this happens purely because inherits. Let's see why and how it works.

What you need to know:

The root html element will inherit the font size set in the browser, unless a fixed value is explicitly set to override it. So although the font size of the html element is directly determined by the rem value, the font size may first come from the browser settings. So the browser's font size setting can affect every value that uses rem units and every value inherited through em units.

Summary of the differences with rem

All the above boils down to the following:

1. rem units translated into pixel values ​​are determined by the html element Determined by the font size. This font size is affected by the font size setting in the browser unless a specific unit is explicitly overridden.

2. em units are converted to pixel values, depending on the font size they are using. This font size is governed 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 just because they provide consistent size rather than inheritance. Instead, it gives us a way to obtain user preferences and influence the size of elements using rem everywhere on the website, instead of using fixed px units.
For this reason, the main purpose of using rem units should be to ensure that our layouts resize to the appropriate size no matter how users set up their browsers.

Why use em units

The em unit depends on a font-size value rather than the font size of the html element.

To this end, the main purpose of the em unit should be to allow extensibility to remain within the scope of a specific design element.

For example, you may use em values ​​to set the padding, margin, line-height and other values ​​of Navigationmenu items. Menu with 0.9rem font size

This way, if you change the menu's font size the spacing around the menu items will scale proportionally in the remaining space.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How does CSS handle the browser’s default style

CSS implements visible progress bar with arrow process

The above is the detailed content of Detailed explanation of the use of px, em and rem in css. For more information, please follow other related articles on the PHP Chinese website!