Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the differences between rem and px in css3. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

The difference between rem and px in css3 is that px is a relative unit of length relative to the screen resolution of the display, while rem is also a relative unit, but relative to the root element of HTML.

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

What is the difference between rem and px in css3

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

Pros and cons: relatively stable and accurate, but there will be page confusion when zooming in or zooming the browsing page in the browser.

3. Rem is a new relative unit of CSS3, and REM is a relative unit and a relative HTML root element. When you use rem to set font-size in the root element, the 1rem is equal to the browser's default font size, which most browsers default to 16px

This unit can be described as a combination of relative size and absolute size, through which all font sizes can be adjusted proportionally only by modifying the root element, and the chain reaction of font size layer by layer can be avoided.

Expand the data

Px:

Px is actually pixels, and when setting the font size with PX, it is more stable and accurate.

However, there is a problem with this method: when users browse the Web page made by us in the browser, if the zoom of the browser is changed, the layout of our Web page will be broken, which is a big problem for users who are concerned about the usability of their own website.

Rem:

Rem is a new relative unit of CSS3 (root em, root em). When you use rem to set the font size for an element, it is still the relative size, but the opposite is only the HTML root element. This unit can be described as a combination of relative size and absolute size, through which all font sizes can be adjusted proportionally only by modifying the root element, and the chain reaction of font size layer by layer can be avoided.

Example:

P {font-size:14px; font-size:.875rem;} above is all the content of this article entitled "what is the difference between rem and px in css3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.