Adaptive font size

Please, changing viewport width!

Recently I was working on my personal page and I wanted to make it as adaptive as possible. And the font first of course. I thought about rem.
We can setup "basic" font size for the page, say 14px. Then all dimensions we can calculate in percents from this value. For example, if we want some button has double "basic" font size:

.btn {
  font-size: 2rem;
}

It is pretty simple and clear. But we want to have adaptivity!
And here "media queries" helps us.
In most cases we do something like:

@media only screen and (max-width: 600px) {
  .btn {
    font-size: 1.5rem;
  }
}

But it is unconvinient - to write media queries for each element....But what if to make only "basic" size dynamic?
In this case all other sizes will be changed automatically.

So we can write a media query for our basic size, but I decided that I didn't want to describe brakepoints and added extra code.
Probably is there a way to calculate the size on the fly?
If we want to calcualte something there is "calc" css function. And if it depends on window width lets pass it 100vw!

In my case a calcualtion was pretty simple:
lets say for page with width 1000px I need basic font size 20px, it means I can get it like calc(100vw * 0.02)
Obviosly, I want to restrict it with minimum and maximum font sizes. And there is my lovely clamp function!
So as a result I have:

html {
  font-size: clamp(14px, calc(100vw * 0.02), 30px);
}

And it is just calcualtion of "basic" font size! We are still able to use media queries as for it and for other elements for tuning.
Looks like work way to make you "basic" font size adaptive.

Thanks a lot! I will be happy to give any feedback about this approach and any other ways of designing adaptive pages!