How to use "vw" units in a responsive website layout?

Question

Layout

I beg you, if possible, explain how to make up responsive pages using "vw"!
Specifically:
1. In the layout, the size of the navigation bar is 1500px, how to translate it into vw ?
2. Fonts. By layout, the < h1 > is 48px, and the default font size on the page is 15px. How to use "vw" in such cases.

Perhaps a stupid question. I've hit a dead end.

Answer 1

1500px=100vw
48px=3.2vw
If you need the whole site in vw, then you need to divide all sizes from the design by 15 and the result is vw.
I had a TK, the layout is needed in vw. The result can be seen here

Answer 2

vw - Viewport Width
vh - Viewport Height
if you set 100vw, it will equal 100% of the screen width (adapts when the screen is resized) the same with the height
1vw - 1% of the screen width
1vh ​​- 1% of the screen height
1. You can't just take and convert to vw, because everywhere 1vw or 1vh will equal a different number. So just use @mediain css or scss and set fixed values
2. If you set the size of the text, for example, 15vw, it will be an adaptive text that will automatically adjust to the screen size, so the size will always be different, and you cannot convert to px. In general, this is used on small screen sizes, such as if the screen size is less than 500px, then you can set the text size in vw, and you can score on smaller screen sizes.
It’s better not to use it permanently for text, because you can’t set a fixed size (you have 48px in your layout), if you set it in vw, it will constantly change when the screen size changes, so the size will no longer be 48px.
I hope I explained clearly)