CSS units and what to look out for

This is the first day of my participation in Gwen Challenge

Px (Pixel) : Unit of relative length, absolute Pixel value, depending on the resolution of the display. Once the resolution is determined, the size set to PX becomes a fixed size and does not automatically scale. (1px = 1/96 inch)
Em: unit of relative length, relative to the parent element font size. If the parent element is not set to font size, the default font size is relative to the browser (1em = 16px, note: the browser’s default font size can be changed). A common practice is to set the default body font size to 62.5% (equal to 10px).
Rem (root EM) : a new relative unit of CSS3. The elements are scaled to the root element relative to the font size of the root element (the default browser size is 16px).
% : relative to the parent element
Vw: Relative to the viewport width, 1vw = 1% * viewport width
Vh: relative to the viewport height, 1vh = 1% * viewport height
Vmin: Small size relative to the viewport (minimum in VW and VH), 1vmin = min (1vh, 1vw)
Vmax: Larger size relative to the viewport (maximum in VW and VH), 1vmax = Max (1vh, 1VW)
Ch: The width of the font 0 relative to the element font, i.e. 1ch = 0 (width of one 0), 3ch = 000 (width of three 0’s)
In (inch) : 1in = 2.54cm=96px
PC (Picas) : 1PC = 1in /6 = 16px, which is about 6pt, 1/6 inch, which is 1PC = 12pt = 1/6in.
Pt: 1pt = 1in /72 = 1.333px (approx.), a unit of physical length equivalent to 1/72 of an inch. Usually used in printing. (1pt = 1/72in)
1cm = 96px / 2.54 = 37.8px
Mm (mm) : 1mm = 1cm / 10 = 3.78px

Pay attention to the point

Px and EM are both units of length. The difference is that the value of PX is fixed, making it easier to calculate. Em values are not fixed, and EM inherits the font size of the parent element.
The default font size for all browsers is 16px. So all untuned browsers fit: 1em = 16px. 12px = 0.75em, 10px = 0.625em.
% and em are cascaded, meaning that the font size of the parent element affects the child element.
Relative length: EM, REM, VW, VH, vmin, vmax, %, CH. It scales better between devices than another length property.
Absolute length: cm, mm, PT, PC, in. The dimensions are fixed and vary widely from device to device, so it is not recommended to use absolute length units on the screen. However, if you know the output media, you can use them, for example for print layouts.
The ultimate GUIDE to CSS argues that px is a relative length, but The Lengths of CSS say it is absolute. Authoritative document MDN defines PX as an absolute unit.
Viewport: On the desktop, Viewport refers to the Viewport area of the browser. The mobile terminal is more complex, which involves three viewports: Layout Viewport, Visual Viewport and Ideal Viewport. The viewport unit, on the desktop side, is undoubtedly the viewport area of the browser; On mobile, it refers to the Layout Viewport of the three viewPorts.

The four viewport units in CSS are VW, Vh, vmin, and vmax. Here’s how compatible they are: