You'll usually find yourself over-complicating your code adding extra media queries when using relative measurements in properties and still you (and your users) will face issues. I'll use fonts as example but the same happens with almost any other prop.

Why? Browsers deal with pixels in relation to the rendered pixels by the same browser.
That means that, on a phone, let's say a Google Pixel 5, which has 1080 x 2340 pixels, you'll see 393 x 851 pixels in your screen, that's due to the density (~432 ppi).

So when you declare:

font-size: 16px;

It will render properly and accordingly to the device rendering it and most important, it will take in mind the user preferences configured on the device.

i.e. When using pixels, if the user has the size configured at 125% on it's device, it will do something like calc(16px*125/100) = 20px.

Relative measurements rely on viewport size, hence ignore the device preference configuration.

In-page Zoom (Ctrl++) or (Ctrl+mouseWheel Up) also ignore zooming on relative sizes.

Las but not least, width: 30vw means 30% of the viewport width, which means it will be affected by the aspect ratio, thus behaving different in a desktop monitor (16:9) than in a smartphone in portrait (usually 9:19 to 9:21).

TL;DR:
Scaling on fonts or UI components is based on strict units and won't work on relative ones. Using relative units cause more problems than benefits, specially accessibility issues, you should not do that unless it's purely intended and defined like that. i.e. a min-height: 100vh for a container.

Hope it helps somehow,

See you!