What is difference between rem & vh & vw & % when I have to use it not px?

Answer 1

An overview can be found easily via a Google search:
https://www.geeksforgeeks.org/css-units-em-rem-px-vh-vw/

The main difference is that rem, vj, vw, % are RELATIVE units while px is ABSOLUTE.

Answer 2

vw vh are called viewport units. They are percentage of screen size. They are used for Responsive Design, which means displaying differently based on user's device.

% is sizing relative to size of parent element.

rem is font size based on user's system default font size. If you fix px to be small, the text will be too small for large screen; If you fix px to be large, the text will be too large for small screen. Using rem is, again, responsive.

There are more aspects about Responsive Design, which couldn't be explained properly without examples. Here are my tutorials:

https://code.sololearn.com/W3gS00IGw160/?ref=app
https://code.sololearn.com/W4CYCf5Izf4Q/?ref=app