1,px: relative length unit. Pixel px is relative to the display screen resolution.
2,em: relative length unit. (1em=16px) 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.
Look at the following example:
<body>body
<div class= "Div1" >div1
<div class= "Div2" >div2
<div class= "Div3" >div3</div>
</div>
</div>
</body>
The computational relationship is this:
The body of the font-size is inherited from the element html,html size is the browser default size 14px;
font-size=1.5*14px of div1 = 21px;
font-size=1.5*21px of div2 = 31.5px;
font-size=1.5*31.5px of div3 = 47.25px;
If you manually set the Div2 font-size to 40px,div3, the font-size should be 1.5*40px = 60px.
3.REM: unit of relative length. R ' is the abbreviation for "root", relative to the root element
4, VH and VW: relative to the height and width of the viewport, not the parent element (the CSS percentage is relative to the height and width of the closest parent element that contains it).
1VH is equal to 1/100 viewport height and 1vw equals 1/100 viewport width.
5. Vmin and Vmax: the minimum or maximum value of both the viewport height and width.
CSS units px, EM, REM, VH, VW, Vmin, Vmax