I designed a web site to work perfectly on a 1280*720 screen.
Then in CSS i added this part to monitor changes in screen size:

:root{
  --sr          : calc(((1vw / 12.8) + (1vh / 7.2))/2);
  --fs-base     : 16;
  --fs-standard : calc(var(--sr) * var(--fs-base) * 1.3);
  --img-base    : 400;
  --img-size    : calc(var(--img-base) * var(--sr))

  /*... other elements */
}

Its calculates the difference between screen sizes and gives me the change ratio. I can then multiply all elements by this ratio and they change accordingly.

It works nicely on many screens including regular, ultrawide ,tablets, phones even when the screen is not full size.

Of course ctrl +/-/0 do not work.

I added a JS function to monitor the keyboard for ctrl +/-/0 and change
all base values accordingly (--fs-base, --img-base, etc.). This allow for elements to grow or shrink if needed.

What might be the problems with such approach?

If my question already been asked and answered i apologize, i did try to search it first.

It works nicely, but I’m not sure if this is a good approach.