What is the difference between rem and px in css3

The difference between rem and px in css3 is: px is a relative length unit, which is relative to the monitor screen resolution; while rem is also a relative unit, but it is relative to the HTML root element.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the difference between rem and px in css3

1. Px is a relative length unit, which is relative to the monitor screen resolution.

Advantages and Disadvantages: It is relatively stable and accurate, but the page will be confused when zooming or zooming in the browser.

3. rem is a new relative unit in CSS3. REM is a relative unit and is relative to the HTML root element. When using rem to set font-size in the root element, 1rem at this time is equal to the browser's default font size. The default size of most browsers is 16px

This unit can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and avoid the chain reaction of compounding font sizes layer by layer.

Extended information

px:

px is actually a pixel. When using PX to set the font size, it is more stable and accurate.

But there is a problem with this method. When the user browses the Web page we created in the browser, if the zoom of the browser is changed, the layout of our Web page will be broken, so for This is a big problem for users who are concerned about the usability of their website.

#rem:

rem is a new relative unit (root em, root em) in CSS3. When using rem to set the font size of an element, it is still relative. size, but relative to the HTML root element only. This unit can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid the chain reaction of compounding font sizes layer by layer.

Example:

p {font-size:14px; font-size:.875rem;}

(Learning video sharing:css video tutorial)

The above is the detailed content of What is the difference between rem and px in css3. For more information, please follow other related articles on the PHP Chinese website!