Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what is the difference between px, em and rem in css". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "what is the difference between px, em and rem in css" can help you solve the problem.

preface

Both em and rem are flexible and extensible units that are converted to pixel values by the browser, depending on the font size in the design, and if you use a value of 1em or 1rem, it can be converted by the browser to anything from 16px to 160px. Browsers use 1px, so 1px always appears as exactly 1px.

Same thing with em and rem.

Using em and rem units allows us to be more flexible in our design, allowing us to control the overall size of elements rather than fixed sizes

Difference between EM and RM

The difference is that the browser depends on who converts it to px values

How rem units are converted to pixel values

When rem units are used, their conversion to pixel size depends on the font size of the page root element, i.e. the font size of the html element. Root element font size multiplied by your rem value.

For example, the font size of the root element 16px, 10rem would be equivalent to 160px, i.e. 10 x 16 = 160.

How em units are converted to pixel values

When em units are used, the pixel value will be the em value multiplied by the font size of the element using em units. For example, if a div has a font size of 18px, 10em would be equivalent to 180px, i.e. 10 × 18 = 180.

Key understanding:

There is a common misconception that em units are font sizes relative to parent elements. 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 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 you explicitly set a fixed value to override it. So although the font size of html elements is directly determined by rem values, the font size may first come from browser settings. So the browser font size settings can affect each value that uses rem units as well as each value inherited through em units.

Sum up the difference between rem em

All of the above boils down to the following:

The rem unit translates into pixel values determined by the font size of html elements. This font size is affected by font size settings in browsers unless explicitly overridden by a specific unit.

Em units are converted to pixel values, depending on the font size they use. This font size is determined 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 but not inheritance. Instead, it gives us a way to capture user preferences to influence the size of elements that use rem everywhere on the site, rather than using fixed px units.

For this reason, the main purpose of using rem units should be to ensure that our layout resizes appropriately regardless of 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 an em unit should be to allow scalability within a specific design element.

For example, you might use em values to set padding, margin, line-height, etc. for navigation menu items. Menu with 0.9rem font size

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

About "what is the difference between px, em and rem in css", the content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.