is it good practice to use vh and vw for applying padding,margin,width and height for each element on website

I have a general question regarding use of vw and vh in angular/ionic application.As per suggestion from senior team member we are using below logic to calculate values of margin/padding in vh and vw. Screens are designed using 360*640 dimensions on zeplin.

$screen-height: 640;
$screen-width: 360;
@function viewport-height($element) {
  @return ($element/$screen-height * 100vh);
}
 
//funtion to calculate element viewport width
@function viewport-width($element) {
  @return ($element/$screen-width * 100vw);
}

below logic is used whenever we need to add margin/padding respectively.

.top-margin{
	margin-top:viewport-height(40);//40 px margin is as per the zeplin design
}

.left padding{
padding-left:viewport-width(15);//15 px left padding is as per the zeplin design
}

I have below queries.

1. Is it a good practice to use this logic for making layout responsive?As I have seen that popular websites use pixel based dimensions?
2. Can this be used for font-size?
3. Any possible issues this logic can create.

Pixels are static values which may work for certain dimensions but will cause problems and hinder design at different dimensions/views(mobile-desktop) <br>

For responsive web design it is a must to follow certain design practices :

1- No Pinch Zoom: Solved by applying viewport correctly.<br>
2- No Horizontal Scrolling: Solved by using relative sizing and positioning and instead of absolute positioning.<br>
3- Font-size Handling: Use em and rems instead of pixels.<br>
4- Layout: Use Media Queries,Flexboxes, Bootstrap etc.