Detailed explanation of the differences and uses of (px em rem) in CSS

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

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 and squares. A 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 need to worry 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 characteristic of
em is: it is not a fixed value, its value changes 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, so it is much simpler and more convenient to use calculations than em, because its reference value is the size of the root element subimage. The browser The default is 16px.
The characteristics of rem are: relative to the font size of the root element, it is easy to calculate. 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.

Simple study notes to facilitate future review. If there are any mistakes or shortcomings, I hope you can give me your advice.

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