The length of the CSS inside the unit PX/PT/EM/IN/PC/MM/CM explained

in CSS, the units of measure are divided into two types:

Relative Unit: px/em/ex/%
Absolute unit: CM/PT/IN/PC/MM

specific explanations of these units

Px
Relative length units. Pixels (Pixel).
Pixels are relative to the display screen resolution. For example, the resolution used by wondows users is typically 96 pixels per inch. The resolution used by Mac users is typically 72 pixels per inch.

Em
Relative length units. The font size relative to the text within the current object.
If the font size of the current inline text is not artificially set, the default font size is relative to the browser.

Ex
Relative length units. The height relative to the character "X". This height is usually half the size of the font.
If the font size of the current inline text is not artificially set, the default font size is relative to the browser.

Pt
Absolute length units. Point.
1in = 2.54cm = 25.4 mm = 72PT = 6pc

Pc
Absolute length units. Picas (Pica). Equivalent to the size of our new No. fourth.
1in = 2.54cm = 25.4 mm = 72PT = 6pc

Inch
Absolute length units. inches (inch).
1in = 2.54cm = 25.4 mm = 72PT = 6pc

Mm
Absolute length units. MM (millimeter).
1in = 2.54cm = 25.4 mm = 72PT = 6pc
Cm
Absolute length units. CM (centimeter).
1in = 2.54cm = 25.4 mm = 72PT = 6pc

What difference does it have?

The first thing to understand is that the screen resolution. We know that at different resolutions, the size of the pixel points is different. So the same Web page, with PX as the unit of length, shows different sizes at different resolutions. At low resolution, the pixel points are large, the details are not clear enough, and the displayed pages are large, but obscure.

In fact, all units, whether relative or absolute, are ultimately converted to PX---displayed on the screen. So in general, in the production of Web pages, the basic unit chooses PX instead of PT, because PT is also converted to PX display via the browser's DPI (for example, the DPI of Firefox is 96, then 9pt = 12px). Not only the pt,cm/in/mm and so on are converted into PX. So both absolute and relative will change at different resolutions. Do not think that I set the length to 3cm, it will be at different resolutions to maintain the 3cm unchanged.

So why do absolute units and relative units appear?

I think PT is a very useful unit, especially when it comes to printing. Now some of the page has been implemented display is a page, printing in another way, I want to print on the PT bar, because for different resolutions, the printed page is the same size. This is the first characteristic of an absolute unit. But keep in mind that, on display, this unit represents not the actual physical length, it is also adjusted according to the real size of the pixel (which is relative to the resolution).

So what is absolute units and relative units? The first thing you can see is the% unit. We have learned the layout of "one column width adaptive" While learning the navigation bar. In that case, the width property of the div container is set to 80%, relative units---relative to the size of the browser window, and the DIV block is 80% wide.

As a matter of fact, we can think of PX as absolute unit---display of absolute units. The other relative units are based on it. For example em, it is relative to the height of the current text font (assuming that the current text font size is 12px, we set a new font of 1.5EM, the new font size is converted to 1.5 = 18px). The thing to remember is that EM is relative to the height of the parent element---assume that the first div we set the font is 12PX, the second level we set to 1.5em, the third level is set to 1.5em, the actual font display is: The first level 12px, the second level of 18px, the third level * 1.5 = 27px.


if it is not correct, please comment.

The length of the CSS inside the unit PX/PT/EM/IN/PC/MM/CM explained