The commonly used unit in css is px (pixel), because px is an absolute unit that cannot change with the size of the mobile phone screen, so various relative units are used
Relative unit:
em: The reference point is the font size of the parent node
body{
width:100em;
height:100em;
}
rem: Calculated relative to the font size of the root element, such as html elements
body{
width:100rem;
height:100rem;
}
vw: the width of the viewport, which is calculated by 1% of the viewport width
body{
width:100vw;
}
vh: the height of the viewport, which is calculated by 1% of the viewport height
body{
height:100vh;
}
vmin: It is the comparison between the width of the visible port and the height of the visible port, and the smallest value is taken
body{
width:100vmin;
height:100vmin;
}
vmax: compare the width of the visible port with the height of the visible port, and take the largest value
body{
width:100vmax;
height:100vmax;
}