Detailed explanation of the difference and use of px em rem in CSS

This article mainly introduces the difference and use of px em rem in CSS. Has very good reference value. Let’s take a look at it with the editor

Recently I encountered the setting of font size when learning fonts.font-size unit can be px or em or rem, what are the differences between these units and how to use them?

px is the basic sampling unit of pixel images. It is only relative to the screen resolution of the monitor. What is a pixel? If you zoom in on a picture, you will see small square grids. , a square grid is a pixel. The default browser font size is 16px.

The characteristics of px are: The font case is fixed and is a fixed value. Older versions of IE cannot scale fonts, but now you basically don’t care about lower versions of IE. Therefore, this unit is generally used, which is accurate enough.

em is a relative unit representing the size of the font relative to its parent element, which can be a decimal, integer. For example, if the font size of the parent element is 16px, then 1em is 16px and 2em is 32px. The characteristics of

em are: is not a fixed value, its value will change with the size of the parent font. Usage scenario: When the current element's inner and outer margins need to be proportional to the current font size, you can use em.

rem is also a relative unit. The difference from em is that it is relative to the root element, which makes calculations much simpler and more convenient than em, because its reference value is the size of the root element subgraph. , the browser default is 16px.

The characteristics of rem are: It is easy to calculate relative to the font size of the root element. You can change the font size of the entire page by controlling the html root font size, which is the mobile adaptation of the page size.

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