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:
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.
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!

If you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides

With Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using something like Fuse.js. In this demo, we’ll use Fuse to search through a set of personal “bookmarks” th

I wanted to implement a notification message in one of my projects, similar to what you’d see in Google Docs while a document is saving. In other words, a

Some months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you’re new to this idea (like I

Since the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making

I remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there

Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Zend Studio 13.0.1
Powerful PHP integrated development environment

Notepad++7.3.1
Easy-to-use and free code editor

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.