Detailed CSS in the PX em rem difference and use

This paper mainly introduces the difference and use of PX em rem in CSS. Has a good reference value. Let's take a look at the little series.

Recently, when learning fonts with font size settings, font-size units can be px or em or REM, so what is the difference between these units, how to use it?

PX is the basic sampling unit of a pixel image, relative to the screen resolution of the display, what is a pixel, you have to enlarge a picture, you will see a small square, a square lattice is a pixel. The default font size for the browser is 16px.

px is characterized by: The font size is fixed, fixed value, the old version of IE can not scale the font, but now basically do not have to control the low version of IE. So the general situation will use this unit, accurate enough.

EM is a relative unit that represents the size of the font relative to its father element, which can be a decimal, integer. For example, the parent element font size is 16px, then 1em is 16px,2em is 32px.

The feature of EM is that it is not a fixed value, and its value varies with the size of the parent font. Usage scenario: Use EM when the inner and outer margins of the current element need to be proportional to the current font size.

REM is also a relative unit and the difference between EM is that he is relative to the root element, so it is easier to use the calculation than the EM simple, because his reference value is the root element sub-chart size, the browser default is 16px.

the characteristics of REM are: relative to the root element font size, calculation is convenient. You can change the font size of the entire page by controlling the HTML root font size, which is adaptive to the mobile side of the page in the Gothic size.